HTMLTableSectionElement: insertRow() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The insertRow()
method of the HTMLTableSectionElement
interface inserts a new row
(<tr>
) in the given table sectioning element (<thead>
, <tfoot>
, or
<tbody>
), then returns a reference to this new row.
Note: insertRow()
inserts the row directly into the
section. The row does not need to be appended separately as would be the case if
Document.createElement()
had been used to create the new
<tr>
element.
Syntax
insertRow()
insertRow(index)
Parameters
index
Optional-
The row index of the new row. If
index
is-1
or equal to the number of rows, the row is appended as the last row. Ifindex
is omitted it defaults to-1
.
Return value
An HTMLTableRowElement
that references the new row.
Exceptions
IndexSizeError
DOMException
-
Thrown if
index
is greater than the number of rows, or smaller than-1
.
Examples
In this example, two buttons allow you to add and remove rows from the table body section; it also updates a <output>
element with the number of rows currently in the table.
HTML
<table>
<thead>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
<button id="add">Add a row</button>
<button id="remove">Remove last row</button>
<div>This table's body has <output>1</output> row(s).</div>
JavaScript
// Obtain relevant interface elements
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // The collection is live, therefore always up-to-date
const rowNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateRowNumber() {
rowNumberDisplay.textContent = rows.length;
}
addButton.addEventListener("click", () => {
// Add a new row at the end of the body
const newRow = bodySection.insertRow();
// Add cells inside the new row
["A", "B", "C"].forEach(
(elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
);
// Update the row counter
updateRowNumber();
});
removeButton.addEventListener("click", () => {
// Delete the row from the body
bodySection.deleteRow(-1);
// Update the row counter
updateRowNumber();
});
Result
Specifications
Specification |
---|
HTML Standard # dom-tbody-insertrow |
Browser compatibility
BCD tables only load in the browser