javascript - 如何使用javascript获取包含tr标签的数组中单击单元格的索引？

Question

我正在为 ISP 开发在线注册系统。在这个项目中，我想获取价格表中单击的单元格的索引。在表格的最后一行中，我只有注册页面的链接。当用户点击该链接时，他/她选择的服务的信息将使用get方法发送到注册页面。我可以处理这个问题，但我的问题是我无法获取所选链接的容器单元的索引。我的意思是当我使用此代码时:
var rows = document.getElementById("myTable").rows;
执行后，“rows”应该是一个二维数组包含表格的行和单元格。我现在想要实现的目标是，当用户单击单元格内的链接时，我可以访问 rows 数组中所选单元格的索引。我怎样才能实现这个目标？

Answer 1

我不清楚您是否需要行中单元格的索引，还是表中行的索引，还是两者都需要，因此这涵盖了两者:

您可以找到包含的td并使用其cellIndex property ;并找到其包含的 tr 并使用其 rowIndex property :

function yourClickHandler(e) {
    var node = e.target;
    while (node && node.tagName !== "TR") {
        if (node.tagName === "TD" || node.tagName === "TH") {
            console.log("The cell's index is " + node.cellIndex);
        }
        node = node === node.tagName === "TABLE" ? null : node.parentNode;
    }
    if (node) {
        console.log("Row's index is " + node.rowIndex);
    }
}

示例:

function yourClickHandler(e) {
    var node = e.target;
    while (node && node.tagName !== "TR") {
        if (node.tagName === "TD" || node.tagName === "TH") {
            console.log("The cell's index is " + node.cellIndex);
        }
        node = node === node.tagName === "TABLE" ? null : node.parentNode;
    }
    if (node) {
        console.log("Row's index is " + node.rowIndex);
    }
}
document.getElementById("the-table").addEventListener("click", yourClickHandler, false);

table, td {
  border: 1px solid #ddd;
}
table {
  border-collapse: collapse;
}

<table id="the-table">
  <tbody>
    <tr>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
    </tr>
    <tr>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
    </tr>
    <tr>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
    </tr>
    <tr>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
    </tr>
    <tr>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
      <td><a href="#">test</a></td>
    </tr>
  </tbody>
</table>