CODEWITHSUNDEEP
jquery
user1121019
user1121019

Reputation: 241

How to hide n numbers of TD in each TR

Present i am trying to show the 4 data rows default in each TR even it's less then four rows in TR. And the second thing want to hide rest of rows in each TR. Finally when i clicked on show button all rows needs to be appear.

Thanks in advance

Upvotes: 0

Views: 128

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

You have created tr in tr which is wrong Your code should be like:

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>

SCRIPT:

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

FIDDLE

Upvotes: 1

Seimen
Seimen

Reputation: 7250

Shorter version of Rohan Kumar's code:

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

Upvotes: 2

Related Questions