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

只需创建2个css类，并将它们交替分配给标记。

Answer 3

使用JQuery试试这个：

$('tr:even').css('background-color', 'grey');

See it in action here

Answer 4

你用什么来创建表，如果它是你可以使用的rails？：

=循环（'奇数'，'偶数'）

或者你可以用PHP这样做：

$ i = 0;

=（$ i ++％2 == 1）？ '奇'：'偶'

Answer 5

只为行创建css类（奇数和偶数），但不要忘记文本的字体颜色应该是关于背景颜色的可重定向

.row_odd{
    background: #ffffff;
    color: #000;
}
.row_even{
        background: #faf8f5;
        color: #000;
}

然后在xhtml中你必须为每一行设置类。例如，在迭代行时使用php，您可以设置变量 $ class 的值。

<tr class="<?=$class?>" onmouseover=""> 
   <td class="center col_check">...</td>
   <td class="links">...</td>  
   <td class="center">...</td>
</tr>

此外，您可以为每列创建其他css类，具体取决于您的需求!!

Answer 6

您也可以尝试不使用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";**

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

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

表行 - 给出替代颜色

6 个答案: