Добавляем строку таблицы в jQuery: туториал для начинающих и профи

Как добавить строку в таблицу с помощью jQuery: полный гайд

Работа с HTML-таблицами — одна из самых частых задач фронтенд-разработчика. А динамическое добавление новых строк в таблицу — это вообще классика жанра. Представьте: вы делаете интернет-магазин, админку для блога или систему учёта задач. Почти всегда нужно, чтобы пользователь мог нажать кнопку «Добавить» — и в таблице появилась новая запись.

Сегодня мы подробно разберём, как добавить строку таблицы в jQuery. Это не просто сухая теория, а практический пошаговый туториал с живыми примерами кода. Вы узнаете о самых популярных методах, подводных камнях и лучших практиках. Погнали!

Почему jQuery, а не чистый JavaScript?

Вопрос резонный. Да, нативный JavaScript давно умеет работать с DOM, и метод document.createElement никто не отменял. Но jQuery добавлять строку таблицы учит быстрее и проще, особенно если вы новичок. jQuery берёт на себя кроссбраузерность и даёт элегантный синтаксис. Кроме того, миллионы строк кода в продакшне написаны на jQuery — и их нужно поддерживать. Поэтому знание этих приёмов — обязательный скилл для веб-разработчика.

Базовый HTML для наших экспериментов

Для начала нам понадобится простая таблица. Вот её разметка — скопируйте её в свой HTML-файл или в песочницу типа CodePen.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Добавить строку в таблицу jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<h2>Список сотрудников</h2>
<table id="employees" border="1">
    <thead>
        <tr>
            <th>Имя</th>
            <th>Должность</th>
            <th>Зарплата</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Анна</td>
            <td>Разработчик</td>
            <td>150 000 ₽</td>
        </tr>
        <tr>
            <td>Иван</td>
            <td>Дизайнер</td>
            <td>120 000 ₽</td>
        </tr>
    </tbody>
</table>

<button id="addRow">Добавить строку</button>

<script>
// Здесь будет наш jQuery-код
</script>

</body>
</html>

Обратите внимание: у таблицы есть thead (шапка) и tbody (тело). Это правильная семантическая структура. Добавление строки в таблицу jQuery мы будем делать именно в tbody, а не в саму таблицу — так мы не сломаем заголовки.

Способ №1: jQuery append — классика

Самый популярный способ — использовать метод .append(). Он добавляет содержимое в конец выбранного элемента. В нашем случае — в конец tbody.

Предположим, мы хотим добавить нового сотрудника. Код будет таким:

$('#addRow').on('click', function() {
    var newRow = '<tr>' +
                 '<td>Пётр</td>' +
                 '<td>Менеджер</td>' +
                 '<td>100 000 ₽</td>' +
                 '</tr>';
    $('#employees tbody').append(newRow);
});

Всё гениально просто: мы собираем HTML-строку с новой строкой таблицы и вставляем её с помощью jQuery добавить строку таблицы методом append. Теперь при каждом клике на кнопку в таблице появляется Пётр-менеджер.

Важно: если у вас нет tbody в разметке, jQuery может добавить строку прямо в table, но в этом случае она может вставиться не туда. Всегда используйте tbody!

Способ №2: prepend — добавляем строку в начало таблицы

А что, если нужно вставить новую строку в самое начало таблицы, сразу после заголовка? Для этого есть метод .prepend(). Он работает как зеркальное отражение append.

$('#addRowTop').on('click', function() {
    var newRow = '<tr>' +
                 '<td>Мария</td>' +
                 '<td>Тимлид</td>' +
                 '<td>200 000 ₽</td>' +
                 '</tr>';
    $('#employees tbody').prepend(newRow);
});

Теперь Мария-тимлид всегда будет первой в списке. Этот приём удобен, когда вы хотите показать самые свежие записи сверху.

Способ №3: jQuery создаёт элемент через $()

Вместо того чтобы собирать строку вручную, можно создать DOM-элемент через конструктор jQuery. Это считается более правильным подходом, особенно если у вас сложные данные или нужно добавить обработчики событий.

$('#addRow').on('click', function() {
    var $newRow = $('<tr></tr>');
    $newRow.append('<td>Ольга</td>');
    $newRow.append('<td>Аналитик</td>');
    $newRow.append('<td>110 000 ₽</td>');
    $('#employees tbody').append($newRow);
});

Этот способ даёт больше гибкости: вы можете отдельно настроить каждую ячейку, добавить классы, атрибуты data-* и так далее. Добавление строки в таблицу jQuery таким методом более читаемо и легче поддерживается.

Способ №4: Вставка в определённую позицию

Иногда нужно вставить строку не в начало и не в конец, а, скажем, после конкретной строки. Для этого используется метод .after() или .before().

Допустим, мы хотим добавить нового сотрудника после Ивана-дизайнера. Найдём его строку и вставим новую после неё:

$('#addAfterIvan').on('click', function() {
    var $ivanRow = $('#employees tbody tr:contains("Иван")');
    var newRow = '<tr>' +
                 '<td>Сергей</td>' +
                 '<td>Тестировщик</td>' +
                 '<td>90 000 ₽</td>