2

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

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

4

7 回答 7

8

id永远不要对每个都使用相同的tr......永远不要。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');
});
于 2012-09-04T12:31:52.437 回答
4

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

$(document).ready(function() {
    $('.duplicate:gt(2)').hide();
});
于 2012-09-04T12:32:44.777 回答
3

使用gt()选择器

 $('.duplicate').gt(2).hide();
于 2012-09-04T12:33:27.407 回答
3

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

<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');
});

演示

于 2012-09-04T12:34:33.437 回答
1

好的，首先，不要使用 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();

应该做的很好...

于 2012-09-04T12:33:13.407 回答
1

尝试这个：

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

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

于 2012-09-04T12:34:39.183 回答
0

尝试这个

 $(document).ready(function ()
{

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

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


});​

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

于 2012-09-04T12:34:13.823 回答