Baseline Widely available
The insertRow() method of the HTMLTableElement interface inserts a new row (<tr>) in a given <table>, and returns a reference to the new row.
If a table has multiple <tbody> elements, by default, the new row is inserted into the last <tbody>. To insert the row into a specific section, use HTMLTableSectionElement.insertRow()
Note: insertRow() inserts the row directly into the table. 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.
insertRow()
insertRow(index)
HTMLTableElement is a reference to an HTML <table> element.
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. If index is omitted it defaults to -1.
An HTMLTableRowElement that references the new row.
IndexSizeError DOMException
Thrown if index is greater than the number of rows.
This example uses insertRow(-1) to append a new row to a table.
We then use HTMLTableRowElement.insertCell() to insert a new cell in the new row. (To be valid HTML, a <tr> must have at least one <td> element.) Finally, we add some text to the cell using Document.createTextNode() and Node.appendChild().
<table id="my-table">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</table>
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");
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3