Question

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

提前致谢

Answer 1

Rohan Kumar代码的缩短版本：

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 <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> 您的代码应该是：

<强> HTML：

$(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();
        });
    });  
});

<强> SCRIPT：

{{1}}

FIDDLE

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

2 个答案: