表行 - 给出替代颜色

Question

在HTML中,我在表中动态添加行我需要使用CSS为备用行提供不同的颜色我该如何实现？

Answer 1

要在所有使用CSS的浏览器中实现这种效果(称为斑马条纹),您需要为每一行添加一个类(例如奇数和偶数)并为它们提供不同的颜色.

如果你想用CSS实现这个并且不关心支持旧浏览器(IE6-8),你应该使用CSS3 nth-child伪元素.这可以在没有额外的等级标记的情况下实现所需的效果,例如

tr:nth-child(odd) {
  background-color: #FF0;
}

tr:nth-child(even) {
  background-color: #F0F;
}

但是,如果你想要完整的浏览器支持并且不介意使用javascript,那么有许多可用的脚本,包括jQuery插件和普通的旧javascript.也许试试这个开始？

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

Answer 2

你也可以尝试不使用CSS，很简单。

代码：

    **var rowCount = document.getElementById("tableID").rows.length;
    var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.style.backgroundColor = "yellow";
                    cell1.innerHTML = "hey";
                    var cell2 = row.insertCell(1);
        cell2.style.backgroundColor = "green";
                    cell2.innerHTML = "hello";**

这里它为表格动态创建行并为列填充不同的颜色。

希望这有帮助..!! 谢谢