如何隐藏表中除点击之外的所有tr [英] How to hide all tr from table except clicked one

问题描述

我想隐藏表格中的所有< tr> ，除非我点击了它。

 <表> 
< tr> 
< td> ABC< / td> 
< td> DEF< / td> 
< td>< i class =delete>删除< / i>< / td> 
< / tr> 
< tr> 
< td> ABC< / td> 
< td> DEF< / td> 
< td>< i class =delete>删除< / i>< / td> 
< / tr> 
< / table> 
  

点击删除按钮可隐藏除当前行以外的所有行。

Jquery code： -

  $（document）.ready（function（）{
 $（ 'table tbody tr'）。siblings（）。not（$（this））。hide（）; 
}）; 
  

请给我建议。

解决方案使用兄弟姐妹如下：

请参阅代码中的内嵌评论：

  //绑定`table`里的`tr`点击事件
 $（'table'）。on（'click '，'tr'，function（）{
 //显示当前的`tr`并隐藏其他
 $（this）.siblings（）。hide（）; 
}）; 
  

演示： http://jsfiddle.net/tusharj/LL0c2efg/

I want to hide all <tr> of the table except on which I clicked.

<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>

On click of delete button hide all rows except current.

Jquery code:-

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

Please suggest me.

解决方案

Use siblings as follow:

See the comments inline in code:

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

Demo: http://jsfiddle.net/tusharj/LL0c2efg/

这篇关于如何隐藏表中除点击之外的所有tr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！