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

Динамическое добавление строк в HTML-таблицы — частая задача в веб-разработке, особенно при создании интерактивных пользовательских интерфейсов. Это руководство демонстрирует эффективные методы достижения этого с использованием jQuery и чистого JavaScript, позволяя вам выбрать подход, наиболее подходящий для вашего проекта.

Содержание

• Добавление строк в таблицу с помощью append() и prepend() в jQuery
• Добавление строк в таблицу с помощью чистого JavaScript

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

jQuery предлагает краткий и эффективный способ манипулирования DOM. Его методы append() и prepend() бесшовно интегрируются со структурами таблиц.

Рассмотрим пример HTML-таблицы:

<table id="myTable">
  <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
    <tr>
  </thead>
  <tbody>
    <!-- Строки будут добавлены сюда -->
  </tbody>
</table>

Чтобы добавить новую строку с помощью jQuery:

// Получаем тело таблицы
let $tableBody = $('#myTable tbody');

// Создаем новую строку
let $newRow = $('<tr>');

// Создаем и добавляем ячейки
$newRow.append('<td>Новое Имя</td>');
$newRow.append('<td>30</td>');

// Добавляем строку в тело таблицы
$tableBody.append($newRow); 

Этот фрагмент кода выбирает тело таблицы, создает новый элемент строки, добавляет ячейки данных и добавляет полную строку в таблицу. Для добавления в начало (prepend) просто используйте $tableBody.prepend($newRow);.

В более сложных сценариях или при добавлении нескольких строк создание строки HTML напрямую может быть более эффективным:

let newRowHTML = `<tr><td>Еще одно Имя</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

Не забывайте очищать данные, предоставленные пользователем, чтобы предотвратить уязвимости XSS.

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

Понимание подхода нативного JavaScript обеспечивает более глубокое понимание манипулирования DOM. Хотя он более многословен, он избегает внешних зависимостей.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'Еще одно Имя';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

Этот код напрямую манипулирует DOM с использованием стандартных методов JavaScript. Выберите метод, который наилучшим образом соответствует потребностям вашего проекта и вашему уровню комфорта с jQuery. Не забудьте включить библиотеку jQuery, если вы используете примеры jQuery: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>