表行 - 给替代颜色

在HTML中，我在表中动态添加行我需要为使用CSS的替代行提供不同的颜色我该如何实现这一目标？表行 - 给替代颜色

2010-10-22 Jeff

动态如何？你需要支持哪些浏览器 - 关于IE6/7呢？ – 2010-10-22 09:53:52

你也可以尝试没有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。

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

来源

2012-07-05 12:43:42 apandey846

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

来源

2010-10-22 09:54:30

为了在所有使用CSS的浏览器中实现这种效果（称为斑马条纹），您需要为每一行添加一个类（例如奇数和偶数）并为它们赋予不同的颜色。

如果你想用CSS实现这一点，并且不关心支持旧浏览器（IE6-8），你应该使用CSS3 第n个孩子伪元素。这可以在没有额外的类别标记的情况下实现所需的效果，例如，

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

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

但是如果你想要完整的浏览器支持，不介意有许多可用的脚本，既jQuery插件和普通的老JavaScript的使用JavaScript。也许尝试这对初学者？什么是你用来创建表

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

See it in action here

来源

2010-10-22 10:03:56 ajcw

考虑提供哪些浏览器支持此CSS属性的信息：Firefox 3。5+，Internet Explorer 9测试版，Opera 9.5+，Chrome和Safari。因此，唯一不支持它的旧浏览器是IE6-8 – 2010-10-22 11:07:31

试试这个使用JQuery （'奇'，'偶'）

或者你可以在PHP像这样：

$ i = 0;

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

来源

2010-10-22 10:06:40 bla

，如果导轨可以使用？：

=循环：

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

来源

2010-10-22 10:25:09

刚刚创建的行CSS类（奇数和偶数），但不要忘了，字体颜色的文本应有关的背景颜色是readeable

.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类取决于你想要的！

来源

2010-10-22 10:58:32

表行 - 给替代颜色

回答

相关问题