在用Javascript创建的表格中应用css样式（jQuery Mobile）

我有一个使用PHP和Javascript动态创建的表格。现在，我试图给最后一个样式添加填充和边框，但它不起作用。我该怎么办？我需要调用一些像触发器（'创建'）或其他元素？我的代码在用Javascript创建的表格中应用css样式（jQuery Mobile）

部分：

$.ajax ({ 
     beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner 
     complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner 
     url: "http://www.someweb.com/somePHP.php", 
     dataType: "json", 
     success: function (data, textStatus, jqXHR) { 
      for(var i = 0; i< data[1].length;i++){ 
       table += "<tr><td>"+data[1][i].mon_da+"</td>"; 
       table += "<td>"+Number(data[1][i].mon_qu).toFixed(2)+"€</td>"; 
       table += "<td>"+data[1][i].mon_con+"</td></tr>"; 
      } 
      table += "<tr style='border:1px solid;padding-top:20px;'><td colspan='2'><b>Disp:</b></td><td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td></tr>"; 
      document.getElementById("tableMo").innerHTML = table; 
     } 
    });

来源

2013-04-10 Angel

什么*不起作用*呢？ – Ohgodwhy 2013-04-10 07:29:44

You can't apply styles to <tr>s like that。

您可以try applying them to the <td>s instead.

我个人比较喜欢的一类在CSS文件添加到tr和处理方式对外部JS。

jsFiddle

HTML

<tr class="stylish"> 
    <td colspan='2'><b>Disp:</b></td> 
    <td><b>"+Number(data[0].usr_to).toFixed(2)+"€</b></td> 
</tr>

CSS

.stylish td { 
    border:1px solid #000; 
    padding-top:20px; 
} 
.stylish td:first-child { 
    border-right:0; 
} 
.stylish td:last-child { 
    border-left:0; 
}

来源

2013-04-10 07:31:39

谢谢，这是我的问题的最佳解决方案。有用！ ; D – Angel 2013-04-10 07:47:18

您可以通过ID拿到表元素，然后用JavaScript加上CSS样式属性：

例如：

document.getElementById("tableMo").style.border = "1px solid black"; 
document.getElementById("tableMo").style.padding = "10px";

检查出一些DOM风格的教程，它可以帮助你

http://www.w3schools.com/jsref/dom_obj_style.asp

来源

2013-04-10 07:32:20 Fabiotocchi

这样做的一种方法是将一个类添加到您的tr标签，像这样：

table += "<tr class='rowStyle'><td>"+data[1][i].mon_da+"</td>";

现在您可以设置行的样式，或者如果您想对表本身进行样式设置，你可以使用jQuery来获取该行的母公司，像这样：

var obj = $('.rowStyle').closest('table');

，只是给它一个ID：

$(obj).attr('id','tableID');

现在只是样式。

虽然这是一个很长的做法。

希望这有助于:)

来源

2013-04-10 07:32:27

你可以做到这一点使用jQuery CSS选择器

来源

2013-04-10 07:54:22

$（'tr：last-child'）.css（'border'，'1px solid＃000'）; – 2013-04-10 07:55:02

在用Javascript创建的表格中应用css样式（jQuery Mobile）

回答

相关问题