Кой е най-добрият метод в jQuery за добавяне на допълнителен ред към таблица като последен ред?
Приемливо ли е това?
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
Има ли ограничения за това, което можете да добавите към подобна таблица (като например входове, селекции, брой редове)?
Подходът, който предлагате, не гарантира резултата, който търсите - какво би станало, ако например имате tbody
:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
Бихте получили следното:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
Затова бих препоръчал този подход:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
Можете да включите всичко в метода after()
, стига то да е валиден HTML, включително няколко реда, както е в примера по-горе.
Актуализация: Преразглеждане на този отговор след скорошната активност по този въпрос. eyelidlessness прави добър коментар, че в DOM винаги ще има tbody
; това е вярно, но само ако има поне един ред. Ако нямате редове, няма да има и tbody
, освен ако не сте посочили такъв от себе си.
DaRKoN_ предлага да се добавя към tbody
, вместо да се добавя съдържание след последния tr
. Така се заобикаля проблемът с липсата на редове, но все пак не е непробиваемо, тъй като теоретично бихте могли да имате няколко елемента tbody
и редът ще се добавя към всеки от тях.
Като преценихме всичко, не съм сигурен, че има едно-единствено решение, което да отговаря на всички възможни сценарии. Ще трябва да се уверите, че кодът на jQuery съответства на вашата маркировка.
Мисля, че най-сигурното решение вероятно е да се уверите, че вашата table
винаги включва поне едно tbody
във вашия маркер, дори ако няма редове. На тази основа можете да използвате следното, което ще работи с колкото и редове да разполагате (и също така ще отчита множество елементи tbody
):
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
Какво ще стане, ако имате <tbody>
и <tfoot>
?
Например:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
Тогава новият ред ще се вмъкне в долния колонтитул, а не в тялото.
Следователно най-доброто решение е да включите таг <tbody>
и да използвате .append
, а не .after
.
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
Можете да използвате тази чудесна функция jQuery add table row. Тя работи чудесно с таблици, които имат <tbody>
и такива, които нямат. Освен това тя взема предвид colspan на последния ред на таблицата.
Ето един пример за използване:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));