Javascript 如何获取单元格'；s位置

我正在写一个脚本来管理一个非常大的表。当用户单击表格单元格时，我想知道他们单击了哪个单元格。 e、 g

应该给我一个（1，1）的单元格引用

我可以用javascript实现这一点。它运行的页面将jquery用于其他目的，因此任何基于jquery的解决方案都是不错的

编辑：要澄清，左上角的单元格为（0，0）。出于性能原因，事件需要绑定到表，而不是tds。

遍历DOM层次结构。。。 您应该能够通过获取对所单击TD的DOM节点的引用来实现这一点，然后向后遍历链，直到到达第一列，边走边计数

如果您位于该同级链的开头（即，行中的第一个TD），则应该是TR节点，这样您就可以执行类似的遍历TR来计算行数

..或使用附加属性标记每个单元格

---

或者，在创建表时，向每个单元格添加一些伪rowidx=“？”和colidx=“？”属性，并使用检索这些属性。如果要使用合法属性，可以将行和列索引放入属性中。

使用

事件

对象的

目标

属性可以非常轻松地完成此操作：

$('#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个事件处理程序绑定到整个表，然后确定单击了哪个表单元格。这就是所谓的事件委托，在适当的情况下可以更有效，这一点很合适。使用此选项可以避免将事件绑定到每个

，并且不需要硬编码坐标。因此，如果您的表如下所示：

<table id='mytable'>
    <tr>
      <td>hi</td>
      <td>heya</td>
    </tr>
    <tr>
      <td>boo</td>
      <td>weee</td>
    </tr>
</table>

---

您提到了一个非常大的表-将单击绑定到每个td是不明智的。更好的方法是使用.live方法，如果您仍然使用jQuery1.2.6，您只需将单击事件绑定到表并使用事件委派即可。如果您需要此代码，请询问

$("#tableId td").live('click', function () {
     var $this = $(this);
     var x = $this.prevAll().length;
     var y = $this.parent().prevAll.length;
     console.log(x + ", " + y);
});

---

假设第一行、第一列为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=函数（）{
document.getElementsByTagName（'table'）[0]。addEventListener（'click'，函数（元素）{
var rowIndex=element.target.parentElement.rowIndex；
var cellIndex=element.target.cellIndex；
document.getElementById（'alert'）.innerHTML=（'Row index='+rowIndex+'，Column index='+cellIndex））；
}，假）；
}

tr，th，td{
填充：0.6rem；
边框：1px纯黑
}
表：悬停{
光标：指针；
}

1.
2.
3.
4.
5.
6.

你的“点击”看起来像是在单元格1,0或0,1或1,2或2,1中……当你说你想知道“他们点击了哪个单元格”时，你真的是指实际坐标还是仅指对该元素的引用？出于好奇，“非常大”的数量级是多少？我需要实际坐标。非常大=200 x 200。0,0是左上角。很抱歉没有指定。我的代码是如何执行的？这将为每个td绑定一个事件处理程序。他说他有一张大桌子。最好是绑定到表本身，然后解决它。可能是这样，为了简单起见，我只是在其中添加了td。这些回答的目的是向提问者呈现总体思路，而不是提供现成的即插即用解决方案：）最初的尝试，在tds上使用事件处理程序。表演糟透了。+1，我支持你：）有人通过投票，否决了所有人。

$('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);
});

$("#tableId td").live('click', function () {
     var $this = $(this);
     var x = $this.prevAll().length;
     var y = $this.parent().prevAll.length;
     console.log(x + ", " + y);
});

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"));