Question

快速的JQuery问题，我有一个用户可以过滤的产品页面。每次应用/删除过滤器时，更改事件都会调用stripeTable()。我尝试使用以下函数实现表条带化，但是在删除一个项目并调用stripTable（）之后，条带化并没有保持一致，即每个可见的奇数行一种颜色，每个可见甚至是另一种颜色。

function stripeTable() {
    // Find all odd visible table rows and add .odd class.
    $("#resultsTable > tbody > tr:even:visible").each(function() {
       $(this).addClass('even');
    });
    // Find all even visible table rows and add .even class.
    $("#resultsTable > tbody > tr:odd:visible").each(function() {
       $(this).addClass('odd');
    });
}

我无法弄清楚为什么以上不会起作用。我设法实现如下的功能，它工作正常。有什么想法吗？

function stripeTable() {
    var count = 1;
    // get all visible table rows 
    $("#resultsTable > tbody > tr").each(function () {
        // If table row is visible, strip accordingly.
        // Row 0 (table headers) not striped.
        if ($(this).is(":visible") && (this.rowIndex !== 0)) {
            if ((count % 2) != 0) {
                // Remove class .even if applied previously
                $(this).removeClass("even");
                // Odd row, add class .odd
                $(this).addClass("odd");
                count++;
            } else {
                // Remove class .odd if applied previously
                $(this).removeClass("odd");
                // Even row, add class .even
                $(this).addClass("even");
                count++;
            }
        }
    });
}

为清楚起见，stripeTable()是最后一个调用的函数，表行在事先隐藏/显示在表中。感谢。

Answer 1

psuedo-selectors的顺序很重要。

// Computes "even" first, then "visible"
"#resultsTable > tbody > tr:even:visible"

// Compute "visible" first, then "even"
"#resultsTable > tbody > tr:visible:even"

<强> Example Fiddle

Answer 2

在CSS中做这个更好的主意，比如：

#resultsTable tr:nth-of-type(even) {
    background-color: #eee;
}

Answer 3

CSS是前往这里的方式，虽然这并没有回答它将为未来读者提供建议的问题。

以下不兼容IE8。

table tr:nth-child(even) {
        background-colour: red;
} 

table tr:nth-child(odd) {
       background-colour: green;
}

The above is equivalent to below 

 //even
table tr:nth-child(2n) {
       background-colour: red;
}

//odd
table tr:nth-child(2n + 1) {
       background-colour: green;
}

JQuery条带奇数/偶数行

3 个答案: