HTMLTableElement: метод insertRow()

Базовая поддержка Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Метод insertRow() интерфейса HTMLTableElement вставляет новую строку (<tr>) в заданную таблицу (<table>) и возвращает ссылку на новую строку.

Если таблица содержит несколько элементов <tbody>, по умолчанию новая строка вставляется в последний <tbody>. Чтобы вставить строку в определённый раздел, используйте HTMLTableSectionElement.insertRow()

Примечание: insertRow() вставляет строку непосредственно в таблицу. Строку не нужно добавлять отдельно, как это было бы при использовании Document.createElement() для создания нового элемента <tr>.

Синтаксис

insertRow()
insertRow(index)

HTMLTableElement — ссылка на элемент HTML-таблицы (<table>).

Параметры

index Необязательный: Индекс строки новой строки. Если index равно -1 или больше или равно количеству строк, строка добавляется в конец. Если index опущено, используется значение по умолчанию -1.

Возвращаемое значение

Элемент HTMLTableRowElement, ссылающийся на новую строку.

Исключения

IndexSizeError DOMException: Выбрасывается, если index больше, чем количество строк.

Примеры

В этом примере используется insertRow(-1) для добавления новой строки в таблицу.

Затем мы используем HTMLTableRowElement.insertCell() для вставки нового ячейки в новую строку. (Для корректного HTML-кода в строке <tr> должен быть хотя бы один элемент <td>.) В заключение мы добавляем текст в ячейку с помощью Document.createTextNode() и Node.appendChild().

HTML

<table id="my-table">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

JavaScript

function addRow(tableID) {
  // Get a reference to the table
  let tableRef = document.getElementById(tableID);

  // Insert a row at the end of the table
  let newRow = tableRef.insertRow(-1);

  // Insert a cell in the row at index 0
  let newCell = newRow.insertCell(0);

  // Append a text node to the cell
  let newText = document.createTextNode("New bottom row");
  newCell.appendChild(newText);
}

// Call addRow() with the table's ID
addRow("my-table");

Результат

Спецификации

Спецификация
HTML # dom-table-insertrow-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`insertRow`	1	12	1 Начиная с Firefox 20, параметр `index` стал необязательным и имеет значение по умолчанию -1 в соответствии со спецификацией HTML.	10	4	18	4 Начиная с Firefox для Android 20, параметр `index` стал необязательным и имеет значение по умолчанию -1 в соответствии со спецификацией HTML.	10.1	3	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow