jquery - 如何在每个 TR 中隐藏 n 个 TD

Question

目前我正在尝试在每个 TR 中显示 4 个默认数据行，即使它在 TR 中少于四行。第二件事想要隐藏每个 TR 中的其余行。最后，当我点击显示按钮时，所有行都需要出现。

提前致谢

Answer 1

Rohan Kumar 代码的较短版本：

http://jsfiddle.net/4PCJw/5/

var $keepComplete = $("#complete td").slice(4).hide(),
    $keepReject = $("#reject td").slice(4).hide();

$("#button").click(function () {
    $keepComplete.toggle();
    $keepReject.toggle();
});

Answer 2

您已tr在tr其中创建wrong 您的代码应如下所示：

HTML：

<table id="effect">
    <tr id="complete">
        <td>0000000</td>
        <td>1111111</td>
        <td>2222222</td>
        <td>0000000</td>
        <td>1111111</td>
        <td>2222222</td>
    </tr>
    <tr id="reject">
        <td>aaaaaaa</td>
        <td>bbbbbbb</td>
        <td>ccccccc</td>
    </tr>

</table>

<button id="button">show</button>

脚本：

$(function(){

    $(" #complete td").each(function(index){
        if(index>3)
            $(this).hide();
    });
    $(" #reject td").each(function(index){
        if(index>3)
            $(this).hide();
    });

    $( "#button" ).click(function() {
        if($(this).text()=='show more') // whatever your initial value  
             $(this).text('show less');
        else
             $(this).val('show more');
        $(" #complete td").each(function(index){
            if(index>3)
                $(this).toggle();
        });
        $(" #reject td").each(function(index){
            if(index>3)
                $(this).toggle();
        });
    });  
});

小提琴