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

Posted 2023-02-25

【中文标题】jQuery在第三个之后隐藏表格行

【英文标题】：jQuery hide table rows after third

【发布时间】：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');
);

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

【参考方案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/