Question

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

--------------
|     |      |
|     | Click|
--------------

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

任何方式我都可以用javascript做到这一点。它运行的页面使用jquery用于其他目的，因此任何基于jquery的解决方案都是好的。

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

Answer 1

使用target对象的event属性非常轻松地完成此操作：

$('#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个事件处理程序绑定到整个表，然后确定单击了哪个表单元格。这被称为事件委托，并且在正确的情况下可以更有效，并且这符合要求。使用此功能可以避免将事件绑定到每个<td>，并且不需要硬编码坐标。所以，如果你的表看起来像这样：

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

它会在点击时提醒坐标。你可以做任何事情。：）

如果您发现性能太慢（取决于您的表的大小），那么您将不得不求助于硬编码或两者的组合，可能只对<tr>索引进行硬编码，因为获取速度最慢，然后动态获取<td>索引。最后，如果所有这些协调业务完全没有必要，而您真正想要的是对所点击的<td>的引用，那么您只需这样做：

$('#mytable').click(function(e) {
    var td = $(e.target);
    // go crazy
});

Answer 2

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

Answer 3

走DOM层次结构......

您应该能够通过获取对点击的TD的DOM节点的引用，然后向后走previousSibling链，直到您到达第一列，然后按照计算进行计数。

你正处于兄弟链的起点（即行中的第一个TD），parentNode应该是TR节点，并且你可以执行类似的遍历{{3用于计算行数的TR。

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

或者，在创建表时，向每个单元格添加一些假的 rowidx =“??”和 colidx =“??”属性，并使用{检索这些属性{3}}。如果要使用legal属性，可以将行和列索引放在previousSibling属性中。

Answer 4

你提到了一个非常大的表 - 将点击绑定到每个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);
});

Answer 5

假设您的第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"));

这当然可以进一步提高..但是它的工作

Answer 6

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;
}

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>
<p id="alert"></p>

如何获取单元格的位置

6 个答案:

走DOM层次结构......

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