如何在表格中查找单元格的行号和列号答案

【问题标题】：How to find row and col number of a cell in table如何在表格中查找单元格的行号和列号
【发布时间】：2012-05-16 16:52:59
【问题描述】：

不使用 jQuery，即使在表格中也能获得 onClick 的 Row 和 Col (X, Y) 的最有效方法是什么？

我认为只为表格分配一个点击监听器，让它冒泡到顶部会很好，但实际上它只是给了我HTMLTableElement。我想从中得到的是 Col 编号和来自这个听众的 Row 编号。这可能吗？

window.onload = function () {
 document.getElementsByTagName('table')[0].addEventListener('click', function() {
  alert(this.tagName);
 }, false);
}

【问题讨论】：

Javascript: Get Cell Location 的可能重复项 -- 请在提出新问题之前使用搜索。
@Felix，我进行了搜索，但我使用的字符串都没有提出这个问题。这对于以后使用搜索的人来说应该会更好一些，因为它使用了更常用的术语。
根据 Jonathan Sampson 发布的内容，我使用了这个。 jsbin.com/iqavad/edit#javascript,html

标签： javascript dom

【解决方案1】：

window.onload = function () {
 document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
  alert(e.target);
 }, false);
}

【讨论】：

【解决方案2】：

您可以绑定到表格，但这会留下您在单元格之间的间距（没有行或单元格索引）内单击的可能性。在下面的示例中，我决定绑定到单元格本身，从而确保始终拥有行和单元格索引。

var tbl = document.getElementsByTagName("table")[0];
var cls = tbl.getElementsByTagName("td");

function alertRowCell(e){
  var cell = e.target || window.event.srcElement;
  alert( cell.cellIndex + ' : ' + cell.parentNode.rowIndex );
}

for ( var i = 0; i < cls.length; i++ ) {
  if ( cls[i].addEventListener ) {
    cls[i].addEventListener("click", alertRowCell, false);
  } else if ( cls[i].attachEvent ) {
    cls[i].attachEvent("onclick", alertRowCell);
  }
}

演示：http://jsbin.com/isedel/2/edit#javascript,html

我想您也可以安全地绑定到表格本身，并对源元素执行检查以查看它是否是单元格：

var tbl = document.getElementsByTagName("table")[0];

function alertRowCell (e) {
  var cell = e.target || window.event.srcElement;
  if ( cell.cellIndex >= 0 )
    alert( cell.cellIndex + ' : ' + cell.parentNode.rowIndex );
}

if ( tbl.addEventListener ) {
  tbl.addEventListener("click", alertRowCell, false);
} else if ( tbl.attachEvent ) {
  tbl.attachEvent("onclick", alertRowCell);
}

演示：http://jsbin.com/isedel/5/edit

【讨论】：

您的第二个示例 (jsbin.com/isedel/4/edit#javascript,html) 不适用于第一个列。但是，我的上帝，你在正确的轨道上！
@MarkTomlin 对此感到抱歉。 cellIndex 的 0 是虚假的。想错了。

【解决方案3】：

这是最简单的方法。

window.onload = function () {
  document.querySelector('#myTable').onclick = function(ev) {
    var rowIndex = ev.target.parentElement.rowIndex;
    var cellIndex = ev.target.cellIndex;
    alert('Row = ' + rowIndex + ', Column = ' + cellIndex);
  }
}

<table border="1" id="myTable">
    <tr>
        <td>first row first column</td>
        <td>first row second column</td>
    </tr>
    <tr>
        <td>second row first column</td>
        <td>second row second column</td>
    </tr>
    <tr>
        <td>third row first column</td>
        <td>third row second column</td>
    </tr>
</table>

【讨论】：