jQuery中的表格行号和列号答案

【问题标题】：Table row and column number in jQueryjQuery中的表格行号和列号
【发布时间】：2009-04-25 04:25:13
【问题描述】：

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

您可以在给定的上下文中使用Core/index 函数，例如您可以检查 TD 在其父 TR 中的索引以获取列号，您可以检查表上的 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。

【讨论】：

为什么它在列跨度@grom 上失败？
@Forkrul Assail, @CMS 失败，ROWSPAN's jsbin.com/eyeyu/1099/edit#preview 单击带有文本 "12" 的单元格。列索引必须为 4
我在变量“数据”中有一些数据.....是否可以将此“数据”附加到具有此列和行值的表中
ROWSPAN 和 COLSPAN 解决方法：这使得使用 SPAN 时的点击工作jsbin.com/eyeyu/1307/edit
var row = $(this).closest('tr').index()

【解决方案2】：

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

【讨论】：

【解决方案3】：

点击获取列索引：

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

点击获取行索引：

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

【讨论】：

【解决方案4】：

在我的脑海中，一种方法是抓取所有以前的元素并计算它们。

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

【讨论】：

【解决方案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");
}

【讨论】：

这些属性符合哪个 html 规范？我似乎找不到它们。
HTML 规范 5，允许自定义属性以前缀 'data-' 开头。
即使它们不符合规范也不会破坏旧浏览器
您可以通过调用访问“数据”字段：$(this).data('row');

【解决方案6】：

最好将点击处理程序绑定到整个表，然后使用 event.target 来获取点击的 TD。这就是我可以在凌晨 1 点 20 分添加的所有内容

【讨论】：

虽然这可能是解决问题的一个有价值的提示，但一个好的答案也可以证明解决方案。请edit 提供示例代码来说明您的意思。或者，考虑将其写为评论。
谢谢，我会考虑再过 10 年修改这个答案