Как мне исчезнуть все другие теги tr с помощью jQuery

Question

Я хочу, чтобы пользователь нажал на флажок, и другие теги tr исчезли и исчезли ...

Вот код для таблицы

<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

Не изящное решение, но это работает

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

И вот как вы можете его показать: ( Демо )

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

Answer 2

Вы могли бы:

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

Answer 3

Примерно так:

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

Демонстрация на JSBin

Answer 4

Попробуйте что-то вроде этого:

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

Это, по сути, говорит "все теги tr в таблице, кроме первого предка отмеченного флажка, который является tr". Другими словами, все остальные. Свяжите эту функцию с событием click флажка, и все будет хорошо. Другой способ выразить это будет:

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

Я предпочитаю второй способ, но первый более интуитивно правильный ИМО.

Имейте в виду, что у вас могут возникнуть проблемы с анимацией элементов tr в нескольких браузерах ... вы никогда не знаете, что получите с таблицами в IE.