在可见的HTML表行上交替显示背景颜色的最快方法

如何解决在可见的HTML表行上交替显示背景颜色的最快方法

|| 我有一个HTML表，在其中动态添加和隐藏行，并且我希望当前的可见行集始终显示为带有备用背景色，以便于阅读。我有以下代码可以正常运行，但是速度很慢（尤其是在Internet Explorer浏览器上）

$(\'table.alternateRow tr:visible\').removeClass(\'odd\').filter(\':odd\').addClass(\'odd\');

这是我的CSS：

.alternateRow tr {
    background-color: #FFFFFF;
}

.alternateRow tr.odd {
    background-color: #DEDEDE;
}

上面的代码是否有适用于可见行但在Internet Explorer中不会冻结的更快的解决方案。我的桌子有大约150-200行可见另外，（出于某些原因）（可能的话），我想避免分页，因为这会使报告更难以阅读

解决方法

您问题中的代码两次遍历表行（一次删除odd类，一次过滤行），然后对过滤后的行进行最后一次遍历以添加odd类。使用each（）只遍历行一次可能会更快：

$(\"table.alternateRow tr:visible\").each(function(index) {
    var $this = $(this);
    if (index & 1) {
        $this.addClass(\"odd\");
    } else {
        $this.removeClass(\"odd\");
    }
});

, 使用CSS 3（IE9），您可以执行以下操作

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

尽管这不会考虑可见性-它确实为您提供了一个有用的选择器（奇/偶）上图：使用CSS不会考虑可见性编辑-添加了说明，以防有人未完全阅读完下方：使用Jquery确实考虑了可见性使用jQuery（有效地允许IE 8和更低版本的IE支持CSS3），您可以将奇/偶部分直接放入选择器...

$(\'table.alternateRow tr:visible:even\').addClass(\'even\');

编辑合并为功能

function zebra(){
    $(\'table.alternateRow tr\').removeClass(\'even\',\'odd\');
    $(\'table.alternateRow tr:visible:even\').addClass(\'even\');
    $(\'table.alternateRow tr:visible:odd\').addClass(\'odd\');
}

这可能不在主题之列，但是您看到jquery datatables插件了吗？ http://www.datatables.net/ 它似乎可以处理这类事情 , 您的选择器似乎有些混乱。看看我在这里所做的事情，更简洁：http：//jsfiddle.net/jomanlk/wTY3p/3/ 基本上，您将应用默认值，并且只为偶/奇类添加额外的类。

#table tr {
    background:#aa0000;
    color:#fff;
}

#table tr.even {
    background:#00AA00;
    color:#fff;
}

$(\'#hide\').click(function(){
    var rows = [3,4,5];
    for (row in rows) {
        $(\'#table tr:eq(\' + row + \')\').hide()
    }
    format() 
});

function format() {
    $(\'#table tr.even\').removeClass(\'even\');
    $(\'#table tr:even\').addClass(\'even\');
}
format() 


<button id=\'hide\'>Hide</button>
<table id=\'table\'>
<tbody>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    </tbody>
</table>

, 我不知道jQuery，所以这可能是多余的，但是... 您是否无法编写自己的代码，使它们从上面的第一行开始循环（以查明是奇数行还是偶数行），使最高行变为不可见？这意味着您不会在每次隐藏或显示行时都遍历所有行。 , 如您所展示的，您已经通过以下方式定义了CSS：

.alternateRow tr {
    background-color: #FFFFFF;
}

.alternateRow tr.odd {
    background-color: #DEDEDE;
}

动态添加行时，应检查行数是偶数还是奇数，并根据该行添加正确的类的tr，如下所示：

$(\'table.alternateRow\').append(function(i,h){
    var tr = \'<tr\';
    if ( $(this).children(\'tr\').size() % 2 == 0 )
        tr += \' class=\"odd\"\';
    tr += \'></tr>\';
    return tr;
});

, 这听起来很奇怪，但是更改受影响的行而不是类的背景颜色可能更快。每当行的任何类更改时，IE8及更低版本都将重新呈现整个表，但如果仅颜色或背景颜色更改，则不会重新呈现整个表。