Question

我有一个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行可见

另外，（出于某些原因）我想尽可能避免分页（作为最后的手段）因为它使报告更难阅读

Answer 1

您的问题中的代码迭代表行两次（一次删除odd类，一次过滤行），然后对过滤的行执行最后一次传递以添加odd类。

使用each()：

，仅对行进行一次迭代可能会更快

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

Answer 2

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

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

虽然这不会考虑可见性 - 它确实为您提供了一个有用的选择器（奇数/偶数）

上面的

：使用CSS不考虑可见性

编辑 - 添加说明，如果某人没有一直读到最后

如下：使用Jquery DOES 考虑可见性

使用jQuery（有效地允许IE 8及更低版本支持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/

它无可救药地处理这类事情

Answer 3

您的选择器似乎有点费解。看看我在这里做了什么，它更简洁：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>

Answer 4

我不知道jquery所以这可能是多余的但是......

难道你不能编写自己的代码来循环上面的一行（以查明它是奇数行还是偶数行），最高行是不可见的？这意味着每次隐藏或显示行时都不会循环遍历所有行。

Answer 5

正如您所示，您已经通过这种方式定义了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;
});

Answer 6

这听起来很奇怪，但更改受影响的行而不是类的背景颜色可能会更快。 IE8及以下版本会重新渲染整个表每个时间任何行的类更改，但如果只有颜色或背景颜色发生变化则不会。

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

6 个答案: