jquery - jquery中的替代行着色

Question

我有一个表格，可以展开和折叠行，列可排序。下面是我的代码，有什么方法可以提高它的性能。并且将完整的行组读入 dom 可以提高性能，但是如果我在 $.each() 循环之外执行它会引发错误。 演示

var alt = true;
var altSub = true;

$.each(myData, function(index, row) {

    var noRow = $(row).length;
    var firstRow = $(row[0]);

    for (var i=0; i < noRow; i++) {
        if(firstRow.attr('id') == $(row[i]).attr('id')) {
            if(alt == true) {
                firstRow.removeClass("odd").addClass("even");
                alt = !alt;
                altSub = true;
            } else if( alt == false) {
                firstRow.removeClass("even").addClass("odd");
                alt = !alt;
                altSub = true;
            }
        } else {
            if(altSub == true) {
                $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2");
                altSub = !altSub;
            } else if( altSub == false) {
                $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub");
                altSub = !altSub;
            }
        }
    }
    $table.children('tbody').append(row);
});

链接文本

Answer 1

您可能会发现:evenand:odd选择器很有用。

然后你可以像这样使用它们：

$('.stripyTable tr:even').addClass('even');
$('.stripyTable tr:odd').addClass('odd');
$('.stripyTable .submenu tr:even').addClass('alt_row_sub');
$('.stripyTable .submenu tr:odd').addClass('alt_row_sub2');

要考虑的另一件事是您是否可以仅使用 CSS 获得不同样式的小节，然后在您的 JS 中您只需要担心应用奇数/偶数类。CSS 可能类似于：

.odd { background-color: blue; }
.even { background-color: white; }
.sub .odd { background-color: green; }
.sub .even { background-color: yellow; }

Answer 2

Tutorials:Zebra Striping Made Easy from the jQuery 是一个关于如何进行斑马条纹的很棒的教程。

Answer 3

您在每个循环中，请执行以下操作：

$.each(myData, function(index, row) {

       if(index % 2 == 0)
       {
            row.addClass("AltRow");
       }
)};