使用 jQuery 动态隐藏表格行答案

【问题标题】：Dynamically hiding table rows with jQuery使用 jQuery 动态隐藏表格行
【发布时间】：2009-08-18 21:48:20
【问题描述】：

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

$(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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这应该可以解决问题：

$(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 的回答启发）。

【讨论】：

这很好用，但有一个问题。最后一个可见的 tr 似乎没有填充，并且在显示隐藏的行之后，它具有正常的填充，但刚刚显示的行具有双重填充。这似乎是一个Mozilla的事情。你知道可能是什么问题吗？
很难说没有看到实际的 CSS 和 HTML。这可能是意外的 CSS 规则的影响，也可能是无效的表结构。注意：我在交替行代码中发现错误后更新了答案。
当我使用规则 table tr { padding: 2px; } 时，无论可见性如何，最后一行似乎都正确显示。
ktross.com/matrix 这是我的代码。不知道它发生了什么。 :(

【解决方案2】：

这样做（已测试）：

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

密钥在gt selector

为防止您的行样式消失，请将它们放在 CSS 类中并使用 addClass 和 removeClass 来应用它们，请记住，如果它们不在类中，则它们不存在 :)

【讨论】：

【解决方案3】：

滚动。将表格的高度设置为适合 5 行的高度，然后使用 css

溢出：滚动； :D

【讨论】：

行最终大小不同，因此很遗憾，这不会很好地工作。谢谢你的想法！ :)