Динамическое добавление строк в таблицу HTML — распространенная задача в веб-разработке. В этой статье блога мы рассмотрим несколько способов добиться этого с помощью TypeScript. Мы предоставим примеры кода для каждого метода, чтобы вы могли выбрать тот, который лучше всего соответствует вашим потребностям.

Метод 1: использование внутреннего HTML
Один простой подход — манипулировать свойством innerHTMLэлемента <tbody>таблицы. Вот пример:

const tbody = document.querySelector('#my-table tbody');
const newRow = '<tr><td>New Cell 1</td><td>New Cell 2</td></tr>';
tbody.innerHTML += newRow;

Метод 2. Создание элементов DOM
Другой метод предполагает создание новых элементов DOM с помощью TypeScript и добавление их в таблицу. Вот пример:

const tbody = document.querySelector('#my-table tbody');
const newRow = document.createElement('tr');
const cell1 = document.createElement('td');
cell1.textContent = 'New Cell 1';
const cell2 = document.createElement('td');
cell2.textContent = 'New Cell 2';
newRow.appendChild(cell1);
newRow.appendChild(cell2);
tbody.appendChild(newRow);

Метод 3: использование InsertRow и InsertCell
Методы insertRowи insertCellобеспечивают более структурированный способ добавления строк и ячеек в таблицу. Вот пример:

const table = document.querySelector('#my-table') as HTMLTableElement;
const newRow = table.insertRow();
const cell1 = newRow.insertCell();
cell1.textContent = 'New Cell 1';
const cell2 = newRow.insertCell();
cell2.textContent = 'New Cell 2';

Метод 4: использование HTMLTemplateElement
HTML-шаблоны предлагают многоразовый и эффективный способ добавления строк в таблицу. Вот пример:

const template = document.querySelector('#row-template') as HTMLTemplateElement;
const tbody = document.querySelector('#my-table tbody');
const clone = document.importNode(template.content, true);
const newRow = clone.querySelector('tr');
newRow.querySelector('.cell1').textContent = 'New Cell 1';
newRow.querySelector('.cell2').textContent = 'New Cell 2';
tbody.appendChild(newRow);

В этой статье мы рассмотрели несколько методов добавления строк в таблицу HTML с помощью TypeScript. Каждый метод имеет свои преимущества в зависимости от сложности и требований вашего проекта. Используя возможности TypeScript и манипулирования DOM, вы можете легко добавлять динамические функции в свои веб-приложения.

Не забудьте выбрать метод, который лучше всего соответствует вашим потребностям и стилю кодирования. Приятного кодирования!