Как показать / скрыть определенные строки таблицы, используя jQuery
Я отображаю некоторые данные в таблице, и для каждой строки у меня есть еще одна с некоторыми подробностями, которые по умолчанию скрыты, и я хочу сделать их видимыми только тогда, когда пользователь нажимает на ссылку.
HTML выглядит так:
<div id="listing">
<?php for(): ?>
<tr>
<td><a href="#" class="toggle">Toggle</a></td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="details" style="display: none">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<?php endfor; ?>
</div>
Я пытался использовать jQuery, но безрезультатно:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr .details').toggle();
});
Решение
На каждом элементе первой строки укажите data-target это будет какой класс для цели и toggle шоу / скрыть.
Так в основном по клику для toggle класс мы получаем data-target использовать это значение, чтобы найти нашу цель, а затем просто toggle цель.
JsFiddle: https://jsfiddle.net/63ujphmj/
Javascript
$(function()
{
$('.toggle').on('click', function()
{
var target = $(this).data('target');
$('.'+target).toggle();
});
});
Html
<div id="listing">
<table>
<tr>
<td><a href="#" class="toggle" data-target="details-1">Toggle 1</a></td>
<td><a href="#" class="toggle" data-target="details-2">Toggle 2</a></td>
<td><a href="#" class="toggle" data-target="details-3">Toggle 3</a></td>
<td><a href="#" class="toggle" data-target="details-4">Toggle 4</a></td>
</tr>
<tr class="details">
<td class="details-1" style="display: none">Toggle 1 details</td>
<td class="details-2" style="display: none">Toggle 2 details</td>
<td class="details-3" style="display: none">Toggle 3 details</td>
<td class="details-4" style="display: none">Toggle 4 details</td>
</tr>
</table>
</div>
Другие решения
Предполагая, что вы исправите неверный HTML и включите <table> теги, которые вы хотите использовать:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr').next('.details').toggle();
});
Вам нужно использовать .closest('tr') перейти в DOM от кнопки, нажатой к родительской строке, затем .next('.details') перейти к следующему элементу строки.