jquery - 隐藏行时更新奇数/偶数行颜色

Question

我在一个页面上有几个表格和一个复选框，用于根据其中一个单元格的内容显示/隐藏行。虽然所有行都可见，但一切都很完美，并且行颜色会根据需要交替。但是，当我隐藏行时，交替的行颜色不再正确(很明显)。如何轻松更新类以在选中复选框时保持交替的行颜色，然后在取消选中复选框后恢复正常？

<table id='27249'><thead><tr><th>h1</th><th>h2</th><th>h3</th><th>h4</th><th>h5</th><th>h6</th></tr><thead><tbody>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='odd'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
<tr class='even'><td>text</td><td>text</td><td>text</td><td>$0.25 </td><td></td><td></td></tr>
</tbody></table>

Jsfiddle 示例 - http://jsfiddle.net/6bfjw/3/

Answer 1

有几种方法可供考虑。由于您的用例，纯 css 方法更具理论性，但实际上并不适合您。

在一个完美的世界中......

首先，为了让您的标记与样式保持松散耦合，并允许轻松扩展，支持更灵活的 CSS 规则。 通常不需要在元素上硬编码even 和odd 类；这意味着每次尝试添加新元素时都必须添加这些类。相反，使用 css3 :nth-child 选择器:

tbody tr:nth-child(odd) {
    background-color:#99FFFF;
}

tbody tr:nth-child(even) {
    background-color:#FFFF99;
}

但是由于您隐藏了元素而没有实际移除它们...

jsFiddle

您需要使用 JavaScript，并手动管理这些类。每次复选框值更改时，将偶数和奇数类重新分配给可见行:

$("#checkbox").change(function () {
    if ($("#checkbox").is(":checked")) {
        $("table tbody tr").each(function () {
            var cell = $.trim($(this).find("td:eq(4)").text());
            if (cell.length == 0) {
                console.log("empty");
                $(this).hide();
            }
        });
    } else {
        $("table tbody tr").show();
    }

    $("table tbody tr").removeClass("odd even");
    $("table tbody tr:visible:odd").addClass("odd");
    $("table tbody tr:visible:even").addClass("even");
});

(当然这意味着您的 CSS 保持原样)。

看看 jQuery docs在选择器上。一些方便的是 :even selector , 和更冗长的 :nth-child .