Создание таблицы с помощью jQuery: корректировка функции append

Быстрый ответ

Создаём профессиональные таблицы! Чтобы добавить в таблицу с идентификатором #myTable строку с двумя ячейками, используйте следующий код:

$("<tr>").append($("<td>").text("Ячейка 1"), $("<td>").text("Ячейка 2")).appendTo("#myTable");

Углубляем навыки в создании таблиц

Когда нам нужно что-то больше, чем просто строка, приходится усовершенствовать навыки и углубиться в создание сложных и динамичных таблиц.

Динамическое создание таблицы

Сначала создадим объект jQuery для таблицы:

var table = $('<table>').addClass('yourCustomClass'); // Вступаем в эпоху стильных таблиц!

Подробнее об этом расскажет наш спикер на видео

Методично собираем таблицу построчно

Чтобы добавить необходимое количество строк, применяем циклы for или each:

for (let i = 0; i < rowCount; i++) {
  let row = $('<tr>').addClass('rowClass'); // Создаём новую строку, как бриллиант!
  for (let j = 0; j < colCount; j++) {
    row.append($('<td>').text(`Строка ${i} Ячейка ${j}`)); // Наполняем ячейки, как волшебник.
  }
  table.append(row); // И вот, уровень пройден! Строка создана!
}

Оптимизация производительности

Не терпится посмотреть на результат? Сократите количество обновлений страницы при помощи document.createDocumentFragment():

var fragment = document.createDocumentFragment();
$(table).find('tr').each(function() {
  fragment.appendChild(this);  // Фрагмент готов и прекрасен!
});
table.get(0).appendChild(fragment);

Завершающий аккорд таблицы

Ваша таблица готова к дебюту! Наслаждайтесь моментом славы:

$("#container").append(table); // И вот, под бурные аплодисменты, ваша таблица!

Визуализация

Создание таблицы с помощью jQuery .append() походит на сооружение архитектурного шедевра:

1️⃣ Закладываем основание:

let table = $('<table></table>');

2️⃣ Строим этажи:

for (let i = 0; i < 3; i++) {
  table.append('<tr></tr>');
}

3️⃣ Обустраиваем помещения:

$('tr').each(function() {
  $(this).append('<td>🪑</td><td>📚</td>');
});

Вот и всё, архитектурное творение готово!

| 🪑 | 📚 | | 🪑 | 📚 | | 🪑 | 📚 |

Приступаем к делу!

Создание таблицы – это не только компоновка <table>, <tr> и <td>, но и следование лучшим практикам, которые облегчают работу и ускоряют браузер.

Избегаем потенциальных проблем

Создание элементов с помощью строковой конкатенации иногда кажется привлекательным, но на самом деле это не лучший способ. Вместо него отдайте предпочтение jQuery или createElement, это действительно работает лучше:

var newRow = $('<tr>').addClass('newRowClass'); // Ваша новая строка прекрасна!

Эффективно работаем с контентом

Для вставки содержимого в ячейки используйте .text() для текста или .append() для элементов. Это словно идеальное приготовление кексиков:

$('td').eq(0).text('Безопасное содержимое'); // Надёжно и твёрдо!
$('td').eq(1).append($('<span>').addClass('label').text('Метка')); // Роскошные дополнительные метки!

Динамическое создание заголовков таблицы

Сделайте заголовки таблицы живыми при помощи массива и магии jQuery:

var headers = ['Имя', 'Возраст', 'Местоположение']; // Золотой треугольник данных
var thead = $('<thead>');
var headerRow = $('<tr>');
$.each(headers, function(i, header) {
  headerRow.append($('<th>').text(header)); // Каждое название так ценно!
});
thead.append(headerRow); // И вот, венец создания на своём месте!
table.prepend(thead);

Полезные материалы

1. .append() | jQuery API Documentation — Блестящий источник информации о методе append в jQuery.
2. jQuery Add Elements — Ваш проводник в мир динамического HTML в рамках jQuery.
3. Introduction to the DOM – Web APIs | MDN — Ваш ключ к пониманию Document Object Model.
4. Modifying the document — Золотая шахта знаний о внесении изменений в документ.
5. A Complete Guide to the Table Element | CSS-Tricks – CSS-Tricks — Обязательный ресурс для отточенных мастеров работы с таблицами.
6. jQuery Cheat Sheet — Недооценимый инструмент в царстве jQuery.
7. jTable.org – A JQuery plugin to create AJAX based CRUD tables — jTable, радующее глаз представление таблиц на jQuery.