Как добавить новую строку в таблицу HTML с помощью jQuery?

Правильный способ добавления строки в таблицу через jQuery

Ваша основная ошибка в том, что вы пытаетесь добавить строку напрямую к таблице #myTable, а не к её телу <tbody>. В HTML-таблице есть чёткая структура: <thead>, <tbody> и <tfoot>. Когда вы используете .append() на самой таблице, jQuery может вставить строку в неправильное место, особенно если у вас есть <thead>.

Вот правильное решение:

$('#addRow').click(function() {
  // Находим tbody внутри таблицы и добавляем строку в конец
  $('#myTable tbody').append('<tr><td>Новый пользователь</td><td>30</td></tr>');
});

Почему это работает?

• Селектор #myTable tbody — мы явно указываем, что хотим работать с телом таблицы, а не с шапкой или всей таблицей.
• Метод .append() — добавляет содержимое в конец выбранного элемента. В нашем случае — в конец <tbody>, после всех существующих строк.
• Строка HTML — мы передаём готовую разметку строки с ячейками. jQuery сам создаст DOM-элементы.

Более гибкое решение с объектом данных

Если вы хотите добавлять строки с разными данными, лучше создать функцию:

function addTableRow(name, age) {
  var newRow = $('<tr></tr>');
  newRow.append('<td>' + name + '</td>');
  newRow.append('<td>' + age + '</td>');
  $('#myTable tbody').append(newRow);
}

// Использование:
$('#addRow').click(function() {
  addTableRow('Анна', 28);
});

Альтернативный метод: .appendTo()

Можно сделать наоборот — создать строку и добавить её к таблице:

$('#addRow').click(function() {
  $('<tr><td>Мария</td><td>35</td></tr>').appendTo('#myTable tbody');
});

Что делать, если <tbody> отсутствует?

Иногда разработчики опускают <tbody> в разметке. Браузер всё равно добавляет его неявно. В этом случае можно использовать find():

$('#addRow').click(function() {
  // Найдём первый tbody внутри таблицы (браузер создаст его автоматически)
  $('#myTable').find('tbody').append('<tr><td>Пётр</td><td>40</td></tr>');
});

Важно: Если у вас несколько <tbody> в одной таблице (это разрешено HTML5), всегда уточняйте, в какое именно тело вы добавляете строку. Используйте идентификаторы или классы для разных <tbody>.

Проверка на ошибки

Добавьте проверку, чтобы случайно не добавить пустую строку:

$('#addRow').click(function() {
  var name = $('#nameInput').val().trim();
  var age = $('#ageInput').val().trim();
  
  if (name && age) {
    $('#myTable tbody').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    // Очищаем поля ввода
    $('#nameInput, #ageInput').val('');
  } else {
    alert('Заполните оба поля!');
  }
});

Теперь ваша таблица будет работать правильно. Главное — всегда помнить о структуре таблицы и добавлять строки именно в <tbody>.

$('#addRow').click(function() {
  const name = 'Ольга';
  const age = 32;
  
  // Шаблонная строка с обратными кавычками
  const rowHtml = `<tr>
    <td>${name}</td>
    <td>${age}</td>
  </tr>`;
  
  $('#myTable tbody').append(rowHtml);
});

document.getElementById('addRow').addEventListener('click', function() {
  var table = document.getElementById('myTable');
  var tbody = table.getElementsByTagName('tbody')[0];
  var newRow = tbody.insertRow(); // Вставляет строку в конец
  
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  
  cell1.textContent = 'Дмитрий';
  cell2.textContent = '45';
});