时间戳

首页 > 解决方案 > 如何获取表格的单元格索引？

javascript - 如何获取表格的单元格索引？

问题描述

我正在编写这个 javascript 代码，并且每当我用鼠标遍历它们时，我都会尝试获取每个单元格的索引。

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

document.body.appendChild(table);

let width = 10;
let height = 10;

table.innerHTML = "";
let content = "";

for (let i = 0; i < width; i++) {

    content += "<tr>";

    for (let j = 0; j < height; j++) {
        content += "<td></td>";
    }

    content += "</tr>";
}

table.innerHTML += content

const cell = document.getElementsByTagName("tr");

cell.addEventListener('mouseover', getIndex());

标签： javascript

解决方案

首先，您应该等到填充表格之后再将其附加到正文。

然后，当getElementsByTagName返回一个节点列表时，您需要对其进行迭代并将一个事件侦听器附加到每个单元格。此时获取所有单元格而不是行可能更容易。

然后从事件侦听器回调中，您可以使用 访问单元格索引，使用 访问this.cellIndex行索引this.parentNode.rowIndex

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

let width = 10;
let height = 10;

table.innerHTML = "";
let content = "";

for (let i = 0; i < width; i++) {
  content += "<tr>";

  for (let j = 0; j < height; j++) {
    content += "<td>X</td>";
  }

  content += "</tr>";
}

table.innerHTML += content;

document.body.appendChild(table);

const cells = document.getElementsByTagName("td");


Array.from(cells).forEach(cell => {
  cell.addEventListener("mouseover", function() {
    const rowIndex = this.parentNode.rowIndex
    const cellIndex = this.cellIndex
    console.log(`rowIndex: ${rowIndex}, cellIndex: ${cellIndex}`);
  });
});

推荐阅读