使用jQuery动态隐藏表行 [英] Dynamically hiding table rows with jQuery

问题描述

我尝试替换表格行的背景颜色，每个部分以相同的颜色开始。我已经实现了这个与下面的代码：

I am trying to alternate background colors of table rows, each section starting with the same color. I have achieved this with the following code:

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

我还需要能够限制在内部可见的行数每个部分。这些需要能够用带有.click（）事件的按钮切换。有谁知道我怎么可以实现这一点？我唯一的解决方案，我想出了导致背景颜色破碎。

I also need to be able to limit the number of rows (5 for example) that are visible inside each tbody section. These need to be able to be toggled with a button with a .click() event. Does anyone know how I could achieve this? The only solutions I have come up with caused the background colors to break. Any help would be greatly appreciated!

以下是表结构的示例：

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

推荐答案

b
$ b

This should do the trick:

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

Edited to clean up code (inspired by @karim79's answer).

这篇关于使用jQuery动态隐藏表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！