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'。

css中有没有办法在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() pseudo-class。

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

Answer 4

使用jQuery的偶数/奇数子implementation

Answer 5

是。您可以使用JavaScript来运行这些元素，并根据偶数/奇数重置它们的类。

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

5 个答案: