Как добавить столбец js
Чтобы добавить новый столбец в html-таблицу можно использовать ряд методов и свойств, таких как: createElement('td')
, append()
, insertAdjacent()
, innerHTML
, insertCell(i)
.
Ключевая идея заключается в том, чтобы для каждой из строк таблицы добавить новый элемент (ячейку).
Исходные данные:
const tableElem = document.querySelector('#myTable');
const rows = [...tableElem.rows];
Вот простой пример, как можно добавить новую колонку справа. С помощью innerHTML
свойства добавляем ячейку с нужным содержанием.
rows.forEach(row => {
row.innerHTML += '<td>...</td>';
});
Такой же результат можно получить, если создать элемент td
используя document.createElement('td')
и явным добавлением узла в конец строки:
rows.forEach(row => {
const td = document.createElement('td');
td.innerHTML = '...';
row.append(td);
});
Чтобы создать новый столбец на определенной позиции (номер столбца), можно использовать insertCell(i)
, где i
будет соответствовать его порядковому индексу. Отрицательный индекс i
равный -1
будет означать крайний правый столбец.
rows.forEach(row => {
const cell = row.insertCell(0);
cell.innerHTML = '...';
});