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
}

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

修改

更新以使用jQuery 1.7，例如此处 - http://jsfiddle.net/UZNKE/6/

Answer 2

假设您的问题是询问我在评论中发布的内容，您将需要更深入的“隐藏”功能，这将更改所有后续功能的类。我希望你能用这样的东西：

function hideRow(rowNum)
{
    var rows = document.getElementById('table-id').getElementsByTagName('table');

    // get current class and hide the row
    var currentClass = rows[rowNum].className;
    rows[rowNum].style.display = 'none';

    // set up classname array
    var classNames = new Array("oddRow", "evenRow");
    // make sure 'j' points to the next desired classname
    var j = 0;
    if (classNames[j] == currentClass)
        j = 1;

    // make all subsequent visible rows alternate
    for (i=rowNum+1; i<rows.length; i++)
    {
        // ignore empty rows
        if (rows[i].currentStyle.display == "none")
            continue;

        // set class name
        rows[i].className = classNames[j];
        j = (j+1) % 2;
    }
}

注意：我没有测试过代码，但我对它进行了评论，因此你应该能够弄清楚发生了什么

表行的奇数偶数类

2 个答案:

修改