Arman Jon Villalobos
Arman Jon Villalobos

Reputation: 43

Hiding other rows in a table when checkbox is selected

<table id="linkedin_match">
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Industry</th>
                <th>Company</th>
                <th>Position</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
            <tr>
                <td>Moses Gonzales</td>
                <td>Greater Seattle Area</td>
                <td>Chemicals</td>
                <td>Superior Grocers</td>
                <td>WC Claim Manager</td>
                <td><a href="#">Invite</a></td>
                <td><input type="checkbox" id="match"/></td>
            </tr>
        </table>

With the table above, how would I perform the logic, such that if the checkbox is selected, the other rows will hide? The rows are not limited to just two. It could be five, it could be ten, it can be just one. Currently my code is :

$('document').ready(function() {
   var tr = $('#linkedin_match tr');
});

Now I don't know what to do with the tr. I'm kinda new to JS too. Thanks.

Upvotes: 1

Views: 1002

Answers (3)

PSL
PSL

Reputation: 123739

You can do this way. ids must be unique so change match as class name.

$(document).ready(function() {
    $('#linkedin_match .match').change(function(){ //bind change event to the checkboxes
        var $this = $(this);
        $('#linkedin_match').find('tr:gt(0)').not($this.closest('tr')).toggle();
        //since all trs are visible you can use toggle to toggle all the trs but not the one that is a parent of this.
       //And un checking will bring all of them back to visible state.
    });
});

Fiddle

if you have no control over changing the id to class or add a class, then you can target the checkbox

 $('#linkedin_match :checkbox').change(function(){...});
  • gt(0) - To select the rows with index greater than 0. i.e to avoid the first one.
  • closest('tr') - To get the parent tr of the checked element.
  • not($this.closest('tr')) - To add a filter. i.e to exclude the current row.
  • toggle() - To toggle the element's state.

Upvotes: 1

Eric H.
Eric H.

Reputation: 7014

First off you shouldn't have two elements with the same id. change those to classes and you could do the following:

$(document).on('click', '.match', function(){ 


    if ($(this).is(':checked')) { 
        $('.match').closest('tr').hide();
        $(this).closest('tr').show(); 
    } else { $('.match').closest('tr').show(); }

});

This solution will show all rows with a checkbox when a box is unchecked, and only show the relevant row when the checkbox is checked.

Upvotes: 1

Matt Saunders
Matt Saunders

Reputation: 4381

Add a checkbox

<input type="checkbox" class="check"> Check me

then invoke jquery toggle

$('.check').click(function(){
    $('td.hide').toggle();
});

Fiddle: http://jsfiddle.net/webbymatt/DLxjR/

P.s. in my example I have put a class on the cell I want to hide, this could also be applied to entire rows. In this case:

<td class="hide">WC Claim Manager</td>

Upvotes: 1

Related Questions