javascript - 表行的奇偶类

Question

我有一个包含行的表，其中的行之间有隐藏的行，并且由于那个奇偶 css 类无法设置。我怎样才能避免那些隐藏的行？

HTML

<tr class="oddRow">
     <td>Avinash</td>
     <td>18-Jun-2010</td>
     <td>LI1004</td>
     <td>5,600.00</td>
     <td>Sort</td>
</tr><tr class="oddRow" style="display:none;">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr><tr class="evenRow">
     <td>Ankur</td>
     <td>14-Jun-2010</td>
     <td>LI1005</td>
     <td>5,000.00</td>
     <td>me</td>
</tr><tr class="oddRow">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr>

Answer 1

我知道这没有标记为 jQuery，但这将是应用此解决方案的最简单方法...

这里不需要两个 CSS 类(奇数和偶数)，只需要一个。首先将每一行的 CSS 设置为默认使用“oddRow”样式声明。 “evenRow”样式声明应该简单地覆盖默认值。

添加这个JS函数

var zebraStripes = function($) {
    $('table.stripes tr').removeClass('evenRow')
        .filter(':visible:odd').addClass('evenRow');
    // using the :odd selector as it is zero-based
}

然后您可以将此函数绑定(bind)到文档就绪事件以及任何更改行可见性​​的事件。

编辑

已更新以与 jQuery 1.7 一起使用，此处示例 - http://jsfiddle.net/UZNKE/6/