How do i fade out all the other tr tags with jQuery

Question

I want the user to click on the checkbox and other tr tags fade out and disappear...

Here is the code for the table

<table class="display" id="events" border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Location</th>
        </tr>
    </thead>


<tbody>
    <tr class="gradeA odd">

        <td><input id="instance_selected0" name="instance_selected0" value="2" type="checkbox"></td>

        <td>September 14, 2010</td>
        <td>Royal Festival Hall - London, United Kingdom</td>
    </tr><tr class="gradeU even">
        <td><input id="instance_selected1" name="instance_selected1" value="2" type="checkbox"></td>

        <td>September 15, 2010</td>

        <td>O2 Academy Newcastle - Newcastle Upon Tyne, United Kingdom</td>
    </tr><tr class="gradeA odd">
        <td><input id="instance_selected2" name="instance_selected2" value="2" type="checkbox"></td>

        <td>September 16, 2010</td>
        <td>Glasgow Barrowlands - Glasgow, United Kingdom</td>
    </tr><tr class="gradeU even">

Answer 1

Not an elegant solution, but this works

$(function() {
    $('input:checkbox').click(function() {
        $(this).closest('tr').siblings().each(function() {
            $(this).fadeOut();
        });
    });
});

And here's how you unhide it: (Demo)

$('input:checkbox').click(function() {
    var check = $(this).attr('checked');
    $(this).closest('tr').siblings().each(function() {
        if (check) {
            $(this).fadeOut();
        }
        else {
            $(this).fadeIn();
        }
    });
});

Answer 2

Try something like this:

function clickEvent(e) {
    $('#the-table tr').not($(e.target).closest('tr')).fadeOut();
}

This essentially says "all the tr tags in the table except for the first ancestor of the clicked checkbox that is a tr". In other words, all the other ones. Bind this function to the click event of the checkbox and you should be good to go. Another way to express this would be:

$(e.target).closest('tr').siblings().fadeOut();

I prefer the second way, but the first is more intuitively correct IMO.

Be warned, though, that you might have trouble animating the tr elements in multiple browsers...you never know what you're going to get with tables in IE.

Answer 3

Something like this:

$('tr input[type=checkbox]').click(function() {
  $('tr').not($(this).closest('tr')).fadeOut('slow');
});

Demo on JSBin

Answer 4

You could:

$("input:checkbox").click(function(){
  $("tr").not($(this).parent().parent()).fadeOut()
});