显示隐藏的表行

Question

我需要隐藏显示表行，但现在看来，我不是针对它正确：

$('.ShowHide').click(function(){ 
    $(this).next('.hiddenTR').toggle(); 
}); 

这里是我的HTML：

<table> 
<tr> 
    <td><img src="img.gif" class="ShowHide"></td> 
    <td>text 1</td> 
</tr> 
<tr class="hiddenTR"> 
    <td colspan="2">hidden text 1</td> 
</tr> 
<tr> 
    <td><img src="img.gif" class="ShowHide"></td> 
    <td>text 2</td> 
</tr> 
<tr class="hiddenTR"> 
    <td colspan="2">hidden text 2</td> 
</tr> 
</table> 

它甚至有可能为目标喜欢这个？我只需要显示下面的TR，但我不知道可以有多少，所以使用ID是不可能的。

需要在正确的方向微调。

谢谢。

Answer 1

如果你试图隐藏下一tr节点使用：

$('.ShowHide').click(function(){ 
    $(this).closest('tr').next('.hiddenTR').toggle(); 
}); 

参考：.closest()

Answer 2

尝试：

$('.ShowHide').click(function(){ 
    $(this).parents('tr').next('.hiddenTR').toggle(); 
}); 

Answer 3

为了扩大在已经给出的实例，这取决于有多少行将在表中，您应该将click事件绑定到表本身，并“监听”click事件源自的元素（节点）。这可以大大加快你的js。

这里有这样一个例子：http://jsfiddle.net/nEEwq/

希望这有助于！