метод insertCell() класса TableRow

Объект TableRow DOM HTML

определение и использование

insertCell() метод вставляет ячейку в текущую строку.

подсказка:используйте метод deleteCell() удалить ячейку из текущей строки таблицы.

смотрите также:

Руководство по HTML:Тег <tr> HTML

пример

пример 1

в начале строки таблицы с id="myRow" вставить новую ячейку с содержимым:

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

Попробуйте сами

ниже на странице предоставлены дополнительные примеры.

грамматика

tablerowObject.insertCell()index)
Параметр Описание
index

Обязателен в Firefox и Opera, опционален в IE, Chrome и Safari.

Числовое значение (начиная с 0), определяющее положение новой ячейки в текущей строке.

Значение 0 вставит новую ячейку в начало. Также можно использовать значение -1, что вставит новую ячейку в конец.

Если этот параметр опущен, в IE insertCell() вставит новую ячейку в конце, в Chrome и Safari - в начале.

Технические детали

Возвратное значение:

Элемент ячейки, вставленный.

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка

Более примеров

Пример 2

Вставка новой ячейки с содержимым в конец строки с id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

Попробуйте сами

Пример 3

Вставка новой ячейки с содержимым в индексе 2 строки с id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

Попробуйте сами

Пример 4

Вставка новой ячейки в начало первой строки таблицы. Сборка rows (.rows[0]) возвращает все элементы <tr> таблицы с id="myTable".

Число [0] определяет элемент, который нужно найти, в данном примере, это первая строка таблицы. Затем мы используем insertCell() для вставки новой ячейки в индексе -1:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

Попробуйте сами

Пример 5

Удаление первой ячейки из строки с id="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

Попробуйте сами

Пример 6

Вставка новой строки в начало таблицы.

Метод insertRow() вставляет новую строку в указанном индексе таблицы, в данном примере, в начале таблицы с id="myTable".

Затем мы используем метод insertCell() для добавления ячейки в новую строку.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Попробуйте сами

Объект TableRow DOM HTML