javascript - 如何将不同的颜色动态应用到 HTML 表格中的每一行？

Question

我已经使用 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）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

// paint rows on document ready
$(function(){
    paint_rows();
});

function paint_rows() {
    $('#table_id tr').each(function(){
        $(this).css('color', get_random_color());
    });
}
</script>

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

paint_rows()而且，您当然可以在需要时调用该函数。

或者，您可以使用css方法：

<style type="text/css">
#table_id tr:nth-child(1){color:blue;}
#table_id tr:nth-child(2){color:red;}
#table_id tr:nth-child(3){color:orange;}
/* etc... */
</style>

但我总是更喜欢 javascript。

然而！

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

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

希望有帮助。

Answer 3

您可以执行以下操作：

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/

Answer 4

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

.odd{
/*set background color*/
}

.even{
/*set background color*/
}