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)) до <tr> с помощью .closest() затем получает .next() родного брата <tr> до .show().Возможно, вы захотите использовать .toggle() вместо .show(), но все остальное будет таким же.

Вы можете попробовать здесь .Обратите внимание, что у вас есть <input> непосредственно в <tr> в примере, я обернул его в <td>, чтобы сделать его действительной демонстрацией.

Answer 2

Подход Ника в порядке, но я бы, вероятно, использовал один обработчик для всей таблицы («делегирование события») через функцию delegate, а не отдельные обработчики. на каждой кнопке, вот так:

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

Живой пример

Помимо прочего, это позволяет вам добавлять больше пар строк в таблицу (и удалять пары строк), не беспокоясь о подключении / отключении обработчиков событий для них. Имейте в виду, это требует, чтобы ничто непосредственно в иерархии между элементом button и элементом table не поглощало щелчков ...

---

Вот мой старый пример, который не использовал delegate, только для исторических целей & mdash; вау делает delegate упрощение кода:

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

Живой пример

Answer 3

Вы можете просто позвонить родителю tr, чтобы показать следующее tr:

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

Я использовал его, и он работал просто отлично.