Добавяне на ред от таблица в jQuery

Кой е най-добрият метод в 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>');
Коментари (22)

Какво ще стане, ако имате <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>");
Коментари (7)

Можете да използвате тази чудесна функция jQuery add table row. Тя работи чудесно с таблици, които имат <tbody> и такива, които нямат. Освен това тя взема предвид colspan на последния ред на таблицата.

Ето един пример за използване:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
Коментари (4)