HTMLTableElement.insertRow()

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

HTMLTableElement.insertRow() method 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 <tbody> :

let specific_tbody = document.getElementById(tbody_id);
let row = specific_tbody.insertRow(index)

注意： 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> 元素。

句法

var newRow = HTMLTableElement.insertRow(index);

HTMLTableElement is a reference to an HTML <table> 元素。

参数

index 可选: 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 greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1 .

返回值

newRow 是 HTMLTableRowElement that references the new row.

范例

此范例使用 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() .

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 实时标准 The definition of 'HTMLTableElement.insertRow()' in that specification.	实时标准
DOM (文档对象模型) 2 级 HTML 规范 The definition of 'HTMLTableElement.insertRow()' in that specification.	过时	Specifies in more detail where the row is inserted.
DOM (文档对象模型) 1 级规范 The definition of 'HTMLTableElement.insertRow()' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`insertRow`	Chrome 4	Edge 12	Firefox 3 注意事项 3 注意事项 Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.	IE 5.5	Opera 10	Safari 4	WebView Android ≤37	Chrome Android 18	Firefox Android 4 注意事项 4 注意事项 Starting with Firefox 20, the index argument has been made optional and defaults to -1 as per HTML specification.	Opera Android 10.1	Safari iOS 3.2	Samsung Internet Android 1.0

图例

完整支持

另请参阅

HTMLTableRowElement.insertCell()
The HTML element representing rows: HTMLTableRowElement

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

参数

返回值

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题