HTMLTableCellElement：cellIndex 属性

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.

HTMLTableCellElement 接口的 cellIndex 只读属性表示单元格在其所在行（<tr>）中的位置。第一个单元格的索引是 0。

值

返回单元格的索引，或如果单元格不属于任何行，则返回 -1。

示例

此示例为 tbody 中第一行的所有单元格编号添加标签。

HTML

html

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>香蕉</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>大米</td>
      <td>$2.5</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

th,
td,
table {
  border: 1px solid black;
}

button {
  margin: 1em 1em 1em 0;
}

JavaScript

const rows = document.querySelectorAll("tbody tr");
const cells = rows[0].cells;

for (const cell of cells) {
  cell.textContent = `${cell.textContent}（单元格 #${cell.cellIndex}）`;
}

结果

规范

Specification
HTML Standard # dom-tdth-cellindex

浏览器兼容性

BCD tables only load in the browser