td/th cellIndex 属性

在网页开发中，表格是常见的元素之一，而在表格中，td 和 th 元素是最常见的单元格元素。在处理表格时，有时候我们需要获取单元格的索引位置，这时就可以使用 cellIndex 属性。

cellIndex 属性

cellIndex 属性是用来获取单元格在所属行中的位置索引的属性。对于 td 元素，cellIndex 表示单元格在所属行中的位置；对于 th 元素，cellIndex 表示单元格在所属行中的位置。

使用示例

HTML 代码

// www.javascriptcn.com code example
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

JavaScript 代码

const table = document.querySelector('table');
const cells = table.rows[1].cells; // 获取第二行的所有单元格

for (let i = 0; i < cells.length; i++) {
  console.log(cells[i].cellIndex); // 输出单元格在所属行中的位置索引
}

在上面的示例中，我们首先获取了表格元素，并通过 rows 属性获取了表格的行，然后通过 cells 属性获取了指定行的所有单元格，最后通过遍历单元格数组，输出了每个单元格的 cellIndex 属性。

注意事项

• cellIndex 属性是从 0 开始计数的，即第一个单元格的 cellIndex 为 0，第二个单元格为 1，以此类推。
• cellIndex 属性只适用于 td 和 th 元素，对于其他元素不可用。
• 如果单元格不在表格中，则 cellIndex 属性返回 -1。

通过使用 cellIndex 属性，我们可以方便地获取表格单元格的位置索引，从而更好地处理表格数据。在实际开发中，可以根据具体需求灵活运用 cellIndex 属性，提高开发效率。