如何隱藏表格中除點擊之外的所有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