Question

我有一个表，其中有一行使用display：none隐藏。我想在单击按钮时显示该行。我怎么能这样做？

<table>

<tr>
<td>
<button class="shownextrow">Show Next Row</button>
</td>
</tr>

<tr style="display:none">
<input type="text" name="input"/>
</tr>

</table>

Answer 1

你可以绑定到按钮并相对找到它，如下所示：

$("button.shownextrow").click(function() { 
  $(this).closest("tr").next().show();
});

这是从按钮（$(this)）到使用.closest()的<tr>然后获得.next()兄弟<tr>到.show()。您可能希望使用.toggle()代替.show()，但其余内容相同。

You can give it a try here。请注意，您在示例中的<input>中直接使用<tr>，我将其封装在<td>中，以使其成为有效的演示。

Answer 2

Nick's approach很好，但我可能会通过delegate函数为整个表（“事件委托”）使用单个处理程序，而不是每个按钮上的单个处理程序，如下所示：

$('#theTable').delegate("button.shownextrow", "click", function() {
    $(this).closest("tr").next("tr").show();
});

Live example

除此之外，它还允许您向表中添加更多行（并删除行对），而不必担心为它们挂钩/取消挂钩事件处理程序。请注意，它确实要求button元素和table元素之间的层次结构中的任何内容都不会占用点击次数...

以下是我未使用delegate的旧示例，仅用于历史目的 - 哇确实delegate简化了代码：

~~$('#theTable').click(function(event) { var button = $(event.target).closest("button.shownextrow"); if (button.length > 0) { button.closest("tr").next("tr").show(); } });~~

~~Live example~~

Answer 3

您只需致电父tr即可显示下一个tr：

$('button.shownextrow').click(function () {
    $(this).parents('tr').next('tr').show();
});

我用它并且工作得很好。

Jquery / javascript onclick显示下一行

3 个答案: