Javascript 使用jQuery动态隐藏表行

我正在尝试交替表格行的背景色，每个部分都以相同的颜色开始。我通过以下代码实现了这一点：

$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });

我还需要能够限制每个tbody部分中可见的行数（例如5行）。这些需要能够通过带有.click（）事件的按钮进行切换。有人知道我是如何做到这一点的吗？我提出的唯一解决方案导致背景色中断。任何帮助都将不胜感激

以下是表格结构的一个示例：

<table>
    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
        <tr>
            <td>Cell Contents</td>
            <td>Cell Contents</td>
        </tr>
    </tbody>
</table>

细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物
细胞内容物

滚动。将表格的高度设置为5行可以容纳的高度，然后使用css

---

溢出：滚动；：D

这应该可以做到：

$(function() {
    $('#showAll').click(function() {
        $('table > tbody').each(function() {
            $(this).children('tr:gt(4)').toggle();
        });
        $("tr:visible").filter(':odd').css("background", "#efefef").end()
            .filter(':even').css("background", "#ffffff");
    }).click();
});

编辑以清理代码（受@karim79答案的启发）。

这样做（经过测试）：

钥匙在门上

---

为了防止行样式消失，请将它们放在CSS类中，并使用addClass和removeClass来应用它们，请记住，如果它们不在类中，那么它们就不存在：）

行的大小不同，因此很遗憾，这不会很好地工作。谢谢你的想法！：）这很有效，但有一个问题。最后一个可见的tr似乎没有填充，显示隐藏行后，它具有正常填充，但刚刚显示的行具有双重填充。这似乎是一个mozilla的东西。你知道问题可能是什么吗？很难说没有看到实际的CSS和HTML。这可能是意外CSS规则的影响，也可能是无效表结构的影响。注意：我在交替行代码中发现错误后更新了答案。当我使用规则

table tr{padding:2px；}

时，最后一行似乎正确显示，而不管可见性如何。这是我的密码。不知道发生了什么事(

var rowLimit = 5;
$(document).ready(function() {
     $('button').click(function() {
        //hide everything after the rowLimit row
        $('table > tbody > tr:gt(' + (rowLimit - 1) + ')').toggle();
     });
 });