Question

如何使用jQuery获取所单击的表格单元格的行号和列号，即

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

Answer 1

您可以在给定的上下文中使用Core/index函数，例如，您可以在其父TR中检查TD的索引以获取列号，并且您可以检查表上的TR索引，以得到行号：

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

检查正在运行的示例here。

Answer 2

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

Answer 3

点击时获取COLUMN INDEX：

$(this).closest("td").index();

点击后获取ROW INDEX：

$(this).closest("tr").index();

Answer 4

在我的头顶，一种方法是抓住所有以前的元素并计算它们。

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

Answer 5

您可以在创建表时在单元格中输出该数据吗？

所以你的表看起来像这样：

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

那么这将是一件简单的事情

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

Answer 6

最好将单击处理程序绑定到整个表，然后使用event.target来获取单击的TD。多数民众赞成我可以在凌晨1点20分加入这个。

表jQuery中的行和列号

6 个答案: