HTMLTableRowElement.insertCell()

在此页

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

HTMLTableRowElement.insertCell() method inserts a new cell ( <td> ) into a table row ( <tr> ) and returns a reference to the cell.

注意： insertCell() inserts the cell directly into the row. The cell does not need to be appended separately with Node.appendChild() as would be the case if Document.createElement() had been used to create the new <td> 元素。

You can not use insertCell() to create a new <th> element though.

句法

var newCell = HTMLTableRowElement.insertCell(index);

HTMLTableRowElement is a reference to an HTML <tr> 元素。

参数

index 可选: index is the cell index of the new cell. If index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. If index is greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1 .

返回值

newCell 是 HTMLTableCellElement that references the new cell.

范例

此范例使用 HTMLTableElement.insertRow() to append a new row to a table.

We then use insertCell(0) 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 'HTMLTableRowElement.insertCell()' in that specification.	实时标准
DOM (文档对象模型) 2 级 HTML 规范 The definition of 'HTMLTableRowElement.insertCell()' 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
`insertCell`	Chrome Yes	Edge 12	Firefox 1	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
支持 `-1` as an index argument	Chrome Yes	Edge 12	Firefox 20	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 20	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
Index parameter is optional	Chrome Yes	Edge 12	Firefox 20	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 20	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

另请参阅

HTMLTableElement.insertRow()
The HTML element representing cells: HTMLTableCellElement

元数据

最后修改： Aug 21, 2019

在此页

句法

参数

返回值

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

相关话题