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 OR 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

在构建行时为其分配一个类名。例如，如果要实现斑马条纹，可能会有一个计数器在添加行时递增。然后检查计数器是否具有奇数或偶数值，并将类名称添加到刚刚添加的相应行中。然后在你的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/

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

4 个答案: