如何获取表格的单元格索引？ [复制]答案

【问题标题】：How to get the cell indexes of a table? [duplicate]如何获取表格的单元格索引？ [复制]
【发布时间】：2020-02-16 17:42:33
【问题描述】：

我正在编写这段 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

【解决方案1】：

在mousemove 事件处理程序中，检查e.target 是否匹配td 选择器，如果匹配则获取cellIndex，它是父节点（tr）rowIndex。

注意：这里的主要思想是向表中添加单个事件处理程序，然后忽略不是td的元素。

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

document.body.appendChild(table);

const width = 10;
const height = 10;

let content = "";

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

  content += "<tr>";

  for (let j = 0; j < height; j++) {
    content += `<td>${i}-${j}</td>`;
  }

  content += "</tr>";
}

table.innerHTML += content;

const displayIndex = document.querySelector('#displayIndex');

table.addEventListener('mouseover', ({ target }) => {  
  if(!target.matches('td')) return;
  
  console.log({
    rowIndex: target.parentNode.rowIndex,
    cellIndex: target.cellIndex
  });
});

td {
  padding: 0.5em;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

【讨论】：

【解决方案2】：

尝试在循环中添加事件侦听器。这样您就可以访问迭代次数。

【讨论】：

【解决方案3】：

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

然后，当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}`);
  });
});

【讨论】：