Question

我想通过使用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');
});

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

Answer 1

永远不要为每个id使用相同的tr ...从不。 Id在HTML中具有唯一名称。您不会收到警告，但代码将无法正确处理。

使用class而不是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');
});

Answer 2

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

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

Answer 3

使用 gt（）选择器

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

Answer 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

Answer 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();

应该做得很好......

Answer 6

试试这个：

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

并为所有<tr>

设置不同的标识符

Answer 7

试试这个

 $(document).ready(function ()
{

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

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


});

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

jQuery在第三个之后隐藏表行

7 个答案: