确定表中偶数/奇数行的更好方法

Question

假设您有一个包含以下示例代码的网页:

<tr class="even">
    <td>something1</td>
    <td colspan="1">somthing1.1</td>
</tr>


<tr class="odd">
    <td>something2</td>
    <td><b>something2.1</b></td>
</tr>

<tr class="even">
    <td>something3</td>
    <td><b>something3.1</b></td>
</tr>

这些不是循环,所以我必须明确说'偶''奇'.稍后如果我们决定在something2和something3之间添加一个新行,那么我们还需要为其余行更改'even''odd'.

在IE6中有自动执行此操作的方法吗？

目前这是我的css代码甚至

.headerTable tr.even {
    font-weight : bold;
    font-size : 9pt;
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
    background-color: #FFFFFF;
    height: 20px;
    color: #000000;
}

我已经有了jQuery

Answer 1

试试jQuery吧.然后你可以简单地这样做:

   $("#myTable tbody tr:visible:even",this).addClass("even"); 
   $("#myTable tbody tr:visible:odd",this).addClass("odd");

":visible"选择器不是必需的,但是当您通过隐藏某些行来过滤表时,该方法仍然可以正常工作.

Answer 2

这样做的方法是使用nth-child(偶数)和(odd)规则.不幸的是,这应该不足为奇,IE6不支持这一点.所以你有几个选择:

A)使用Javascript,明显的缺点是它不能用于禁用JS的人:

var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd';
}

如果您希望在应用程序上需要更多动态客户端行为,则可以检查类似jQuery的库.对于这一点,它是不必要的,但它使得跨浏览器使用Javascript变得轻而易举.您可以使用jQuery执行上述操作,就像在此答案中所示.

根据您的受众,Javascript可能完全可以接受.如果不是,那么也许你可以......

B)简化你的CSS并继续手动完成.您只能使用类标记奇数行,然后使行默认样式为均匀样式.移动时,这将为您节省一些工作.

C)以编程方式生成行.如果您要经常更新它以确保这是一个问题,那么将这样的数据输入到固定表中真的很古怪.我显然没有注意到你的情况,但是用一种像PHP这样的简单语言循环来做这件事应该是微不足道的.

D)停止使用真正过时的浏览器.:)(这只是半开玩笑,因为我确定它不受你的控制)

Answer 3

最好的方法是:nth-child()伪类.

但不幸的是,它还没有被广泛支持.所以你可能需要使用JavaScript来做到这一点.

Answer 4

使用jQuery的偶数/奇数子实现