Question

我需要隐藏show table行，但似乎我没有正确定位它：

$('.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/

希望这有帮助！

显示隐藏表行

3 个答案: