如何以不同的方式动态地将颜色应用于HTML表格？

我已经使用javascripts动态创建了HTML表，现在我想将每一行应用为不同的颜色。 我怎么能这样做？

Answer 1

这样做

$("tr:even").css("background-color", "#eeeeee"); $("tr:odd").css("background-color", "#ffffff"); 

或者在下面

 $(function(){ $('#table1 tr:odd').addClass('A'); // for even $('#table1 tr:even').addClass('B'); }); 

Answer 2

您可以通过以下方式之一实现此目的：css或javascript：

javascript方法（我建议包括jQuery）：

只需确保在数组colors添加足够的颜色值（也可以使用hex值）。

并且，您可以在需要时调用函数paint_rows() 。

或者你可以使用css方法：

但我总是喜欢javascript。

然而！

如果你只是想要每隔一行颜色并在两种颜色之间切换（例如：一个黑色，一个蓝色，一个黑色，一个蓝色等），请使用以下css ：

 #table_id tr{color:black;} #table_id tr:nth-child(even){color:blue;} 

希望有所帮助。

Answer 3

在构建行时为它们分配一个类名。 例如，如果要实现斑马条纹，则可能会有一个计数器在添加行时递增。 然后检查计数器是否具有奇数或偶数值，并将类名称添加到刚刚添加的相应行中。 然后在你的CSS中，你可以做一些像，

 .odd{ /*set background color*/ } .even{ /*set background color*/ } 

Answer 4

您可以执行以下操作：

 var tbl = document.getElementsByTagName("table")[0].style.border = "1px solid red"; td1 = document.getElementsByTagName("tr")[0].style.color = "red"; td2 = document.getElementsByTagName("tr")[1].style.color = "blue"; 

http://jsbin.com/EXUPuha/1/