Добавление строки в таблицу с помощью jQuery

jQuery предоставляет встроенные инструменты для динамического манипулирования элементами DOM.

Вы можете добавить что угодно в вашу таблицу следующим образом:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Ячейка с изображением')
            )
        )
    );

Запись $('<some-tag>') в jQuery представляет собой объект тега, у которого можно устанавливать и получать несколько атрибутов с помощью метода attr, а также использовать метод text, который задает текст между тегами, например: <tag>text</tag>.

Форматирование отступов может выглядеть немного странно, но это сделано для того, чтобы проще было увидеть, что происходит в этом примере.

Если у вас есть <tbody> и <tfoot>, например:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

то добавив новую строку с помощью метода .after, вы вставите ее в tfoot, а не в tbody.

Наилучшим решением будет использовать тег <tbody> и метод .append, а не .after:

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Таким образом, вы гарантируете, что ваша новая строка будет добавлена именно в тело таблицы.

Я рекомендую использовать

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

вместо

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>'); 

Ключевые слова first и last работают с первым или последним элементом, который был открыт, а не закрыт. Поэтому это более корректно работает с вложенными таблицами, если вы не хотите, чтобы изменялась вложенная таблица, а вместо этого хотите добавить строки к общей таблице. По крайней мере, это то, что я обнаружил.

<table id="myTable">
  <tbody id="first">
    <tr><td>
      <table id="myNestedTable">
        <tbody id="last">
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

Это можно сделать легко, используя функцию last() библиотеки jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

В данном коде мы выбираем последний элемент с ID tableId и добавляем в него новую строку таблицы. Обратите внимание, что last() выбирает последний элемент из выбранного набора, а append() добавляет содержимое в конец этого элемента.

Я решил это следующим образом.

Используя jQuery, я добавил новую строку в таблицу следующим образом:

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
)

Таким образом, добавляется строка с четырьмя ячейками, содержащими текст.

Сниппет

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Имя</th>
    <th>Фамилия</th> 
    <th>Возраст</th>
    <th>Город</th>
  </tr>
  <tr>
    <td>Джилл</td>
    <td>Смит</td> 
    <td>50</td>
    <td>Нью-Йорк</td>
  </tr>
</table>

Теперь вы можете легко добавлять новые строки с данными в свою таблицу!