jQuery在第三个之后隐藏表格行答案

【问题标题】：jQuery hide table rows after thirdjQuery在第三个之后隐藏表格行
【发布时间】：2012-09-04 12:25:38
【问题描述】：

我想使用 jQuery 在第三行之后隐藏表格中的所有行。这是我的方法：

<table>
    <tr id="duplicate">
        <td style="text-align:center;">1</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">2</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">3</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">4</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">5</td>
    </tr>
</table>

jQuery:

$(document).ready(function() {
    $('#duplicate'):nth-child(n+3).hide();
    alert('123');
});

当然，警报显示得很好，所以它会被执行，但我的表没有任何结果。

【问题讨论】：

标签： jquery html-table

【解决方案1】：

切勿对每个 tr 使用相同的 id... 从不。 Id 在 HTML 中具有唯一的名称。您不会收到警告，但代码不会被正确处理。

使用类而不是 id。

 <tr class="duplicate">
        <td style="text-align:center;">1</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">2</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">3</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">4</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">5</td>
    </tr>
...

和 Javascript：

$(document).ready(function() {
    $('.duplicate:gt(2)').hide();
    alert('123');
});

【讨论】：

【解决方案2】：

首先id名称必须是唯一的。你应该使用类。

$(document).ready(function() {
    $('.duplicate:gt(2)').hide();
});

【讨论】：

【解决方案3】：

使用gt()选择器

 $('.duplicate').gt(2).hide();

【讨论】：

【解决方案4】：

不要为每个人设置ID，只为表：

<table id="duplicate">
    <tr>
        <td style="text-align:center;">1</td>
    </tr>
    <tr>
        <td style="text-align:center;">2</td>
    </tr>
    <tr>
        <td style="text-align:center;">3</td>
    </tr>
    <tr>
        <td style="text-align:center;">4</td>
    </tr>
    <tr>
        <td style="text-align:center;">5</td>
    </tr>

</table>

并将脚本更改为：

$(document).ready(function() {
    $('#duplicate tr:nth-child(n+3)').hide();
    alert('123');
});

DEMO

【讨论】：

【解决方案5】：

好的，首先，不要使用ID属性将ID替换为类...

<table>
    <tr class="duplicate">
        <td style="text-align:center;">1</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">2</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">3</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">4</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">5</td>
    </tr>

$('.duplicate').gt(2).hide();

应该做的很好......

【讨论】：

【解决方案6】：

试试这个：

$(document).ready(function() {
 $("table tr:first").nextAll().hide();
));

并为所有<tr>设置不同的标识符

【讨论】：

【解决方案7】：

试试这个

 $(document).ready(function ()
{

    $("table tr").each(function (indx, ob)
    {

        if (indx > 2)
        {
            $(ob).hide();
        }
    })


});

小提琴：http://jsfiddle.net/w3yjH/

【讨论】：