Jquery/javascript onclick 显示下一行

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();
});

我用过，效果很好。