Как скрыть все tr из таблицы, кроме как щелкнули один

Question

Я хочу скрыть все <tr> таблицы, за исключением которых я нажал.

<table> 
    <tr> 
     <td>ABC</td> 
     <td>DEF</td> 
     <td><i class="delete">delete </i></td> 
    </tr> 
    <tr> 
     <td>ABC</td> 
     <td>DEF</td> 
     <td><i class="delete">delete </i></td> 
    </tr> 
</table> 

При нажатии кнопки удаления скрыть все строки, кроме текущего.

Jquery код: -

$(document).ready(function() { 
    $('table tbody tr').siblings().not($(this)).hide(); 
}); 

Пожалуйста, предложите мне.

Answer 1

Использование siblings следующим образом:

Смотрите комментарии встроенный в коде:

// Bind click event on `tr` inside `table` 
$('table').on('click', 'tr', function() { 
    // Show current `tr` and hide others 
    $(this).siblings().hide(); 
}); 

Демо: http://jsfiddle.net/tusharj/LL0c2efg/

Answer 2

Вам необходимо запустить свой код под обработчик события щелчка, а не когда страницы грузы. Также обратите внимание, что .not(this) избыточен при использовании siblings(), поскольку исходный элемент не будет включен в любом случае. Попробуйте это:

$(document).ready(function() { 
    $('table tbody tr').click(function() { 
     $(this).siblings().hide(); 
    }); 
}); 

Example fiddle

Answer 3

$(document).ready(function() { 
    $('table tbody tr').click(function(){ 
     $('table tbody tr').hide(); 
     $(this).show(); 
    }) 
}); 

DEMO