如何以不同的方式将颜色动态应用于 HTML 表格的每一行？ [关闭]答案

【问题标题】：How can I apply dynamically color to each row differently to HTML table? [closed]如何以不同的方式将颜色动态应用于 HTML 表格的每一行？ [关闭]
【发布时间】：2013-10-21 07:08:36
【问题描述】：

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

【问题讨论】：

欢迎来到 Stackoverflow！有关您编写的代码问题的问题必须在问题本身中描述具体问题——并包括重现它的有效代码。那么，您尝试过什么？
您的问题的答案可以在这里找到stackoverflow.com/questions/10851816/…
你试过了吗？

标签： javascript jquery html

【解决方案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');

});

【讨论】：

【解决方案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;}

希望有帮助。

【讨论】：

【解决方案3】：

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

.odd{
/*set background color*/
}

.even{
/*set background color*/
}

【讨论】：

【解决方案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/

【讨论】：