HTML | DOM TableRow 对象

HTML | DOM TableRow 对象代表 HTML 表格中的一行 (<tr>)。它提供了对表格行的访问和操作的方法和属性。

构造函数

TableRow 对象可以通过 document.createElement() 方法创建:

const row = document.createElement("tr");

属性

1. align

align 属性用于获取或设置表格行的对齐方式。可选的值有：

• "left"：左对齐
• "right"：右对齐
• "center"：居中对齐
• "justify"：两端对齐
• "char"：按照字符对齐
• "notset"：未设置对齐方式

示例代码：

row.align = "center";

2. bgColor

bgColor 属性用于获取或设置表格行的背景颜色。

示例代码：

row.bgColor = "red";

3. rowIndex

rowIndex 属性用于获取表格中行的索引，即行在表格中的位置。

示例代码：

const index = row.rowIndex;

4. cells

cells 属性返回一个 HTMLCollection 对象，包含了表格行中所有的单元格 (<td> 或 <th>)。

示例代码：

const cells = row.cells;

方法

1. deleteCell()

deleteCell() 方法用于删除表格行中指定索引的单元格。

示例代码：

row.deleteCell(0);

2. insertCell()

insertCell() 方法用于在表格行中插入一个新的单元格，并返回新插入的单元格。

示例代码：

const cell = row.insertCell(0);

示例

以下是一个使用 TableRow 对象的示例：

const table = document.createElement("table");
const row = document.createElement("tr");

const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);

cell1.textContent = "Cell 1";
cell2.textContent = "Cell 2";

table.appendChild(row);

document.body.appendChild(table);

以上示例代码会创建一个包含两个单元格的表格行并添加到页面中。

参考链接

• HTMLTableRowElement - MDN Web Docs