如何获取单元格的位置
我正在写一个管理一个非常大的表的脚本。 当用户单击表格单元格时，我想知道他们单击了哪个单元格。 例如
-------------- | | | | | Click| -------------- 应该给我一个（1,1）的单元格引用。
我可以用javascript做任何方式。 它运行的页面使用jquery用于其他目的，因此任何基于jquery的解决方案都是好的。
编辑：澄清一下，左上角的单元格是（0,0）。 出于性能原因，事件需要绑定到表 ，而不是tds。
使用event对象的target属性可以非常轻松地完成此操作：
$('#mytable').click(function(e) { var tr = $(e.target).parent('tr'); var x = $('tr', this).index(tr); var y = tr.children('td').index($(e.target)); alert(x + ',' + y); });
此方法允许您仅将1个事件处理程序绑定到整个表，然后确定单击了哪个表单元格。 这被称为事件委托，并且在正确的情况下可以更有效，并且这符合要求。 使用它可以避免将事件绑定到每个
，并且它不需要硬编码坐标。 所以，如果你的表看起来像这样：
hi heya boo weee
它会在点击时提醒坐标。 你可以做任何事情。 🙂
如果您发现性能太慢（取决于您的表的大小），那么您将不得不求助于硬编码或两者的组合，可能只是硬编码
索引，因为这将是最慢的获取，然后动态获取
索引。 最后，如果所有这些坐标业务完全没有必要，而您真正想要的是对点击的
的引用，您只需执行以下操作：
$('#mytable').click(function(e) { var td = $(e.target); // go crazy });
$('td').click(function(event) { var row = $(this).parent('tr'); var horizontal = $(this).siblings().andSelf().index(this); var vertical = row.siblings().andSelf().index(row); alert(horizontal+','+vertical); });
走DOM层次结构……
您应该能够通过获取对单击的TD的DOM节点的引用，然后向后走向previousSibling链直到到达第一列，并按计算进行计数。
一个你在兄弟链的开头（即行中的第一个TD）， parentNode应该是TR节点，并且你可以通过previousSibling TR执行类似的遍历以计算行数。
..或标记具有附加属性的每个单元格
或者，当您创建表时，添加一些假rowidx =“??” 和colidx =“??” 属性到每个单元格并使用getAttribute检索它们。 如果要使用合法属性，可以将行和列索引放在轴=“??，??”中 属性。
你提到了一个非常大的表 – 将点击绑定到每个td是不明智的。 更好的方法是使用.live方法，如果仍然在jquery 1.2.6上，你可以将click事件绑定到表并使用事件委托。 如果你需要这个问题的代码。
$("#tableId td").live('click', function () { var $this = $(this); var x = $this.prevAll().length; var y = $this.parent().prevAll.length; console.log(x + ", " + y); });
假设您的第1行，第1列为0,0
var row = 0; $('#tblImages > tbody > tr').each( function(){ var col = 0; $(this).children('td').each( function(){ $(this).attr("currentRow", row).attr("currentCol", col); col++; }); row++; } ); $('#tblImages > tbody > tr > td').click(function(){ alert( $(this).attr("currentRow") + " " + $(this).attr("currentCol"));
这当然可以进一步提高..但它的工作
window.onload = function () { document.getElementsByTagName('table')[0].addEventListener('click', function(element) { var rowIndex = element.target.parentElement.rowIndex; var cellIndex = element.target.cellIndex; document.getElementById('alert').innerHTML = ('Row index = ' + rowIndex + ', Column index = ' + cellIndex); }, false); }
tr, th, td { padding: 0.6rem; border: 1px solid black } table:hover { cursor: pointer; }
1 2 3 4 5 6