У меня есть структура таблицы следующим образом;
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 2</div></td>
</tr>
Теперь, щелкнув значок значка (шеврон), я хочу, чтобы строка данных отображалась сразу под нажатой строкой (она должна быть tr, содержащая дочернюю таблицу). Это должно быть вставлено/добавлено динамически при щелчке любой из строки списка.
Как это сделать с помощью jQuery? Любые примеры для справки будут действительно полезны.
в следующем примере создается новый tr
(если не существует), содержащий элемент table
под tr
где находится значок с щелчком.
function createChildTable(string)
{
return $('<table>').append(
$('<tr>').append(
$('<td>').append(string)
)
);
}
$('.icon-chevron-right').click(function() {
var details = $(this).closest('tr').next('tr.details');
if (details.length) details.show();
else {
// first time clicked
details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
$(this).closest('tr').after(details);
}
});
Я бы сказал, что есть два основных способа сделать это, и вам нужно будет выяснить, какой из них лучше для вас; это зависит.
То, о чем вы говорите, это добавить строку в DOM. В некоторых случаях это нормально, это зависит от того, для чего используется эта свернутая строка. Если вы хотите удалить свернутую строку и добавить ее снова, это может сделать вашу жизнь трудной, если вам нужно каждый раз восстанавливать весь внутренний HTML через JavaScript.
var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';
$('.icon-chevron-right').click(function() {
$('.collapse').remove(); // Deletes all rows that has class "collapse"
collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what stored in collapseHTML after "this closest tr"
});
Затем, как сказал кто-то другой, вы можете решить эту проблему, добавив эти строки из get go так:
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr class="collapse">
<td colspan="2">This is my new row</td>
</tr>
Затем ваш css должен выглядеть так:
.collapse {
display: none;
}
.collapse.active {
display: block;
}
Это означает, что когда вы добавляете active
класс в строку collapse, он display: none;
из display: none;
для display: block;
, Это вы делаете с помощью JavaScript/jQuery:
$('.icon-chevron-right').click(function() {
$('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
$(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr next element" (which is the collapse row)
});
Надеюсь это поможет!