jQuery中的表行和列号


141

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

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

Answers:


216

您可以在给定的上下文中使用Core / index函数,例如,可以检查TD的父TR中的索引以获取列号,还可以检查Table上的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);
});

在此处查看运行示例。


为什么它在列跨度@grom上失败?
EarlyPoster 2011年

@Forkrul攻击,@CMS它的失败,ROWSPAN's jsbin.com/eyeyu/1099/edit#preview点击文本单元“12”。列索引必须是4
安德鲁D.

我在变量“ data”中有一些数据.....是否可以使用此col和row值将此“ data”附加到表中
shanish 2012年

2
ROWSPAN和COLSPAN可以解决:使用SPAN时,单击可以工作 jsbin.com/eyeyu/1307/edit
eddyparkinson 2012年

9
var row = $(this).closest('tr').index()
SpYk3HH 2015年

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


21

从我的头顶上跳下来,一种方法是抓住所有先前的元素并计算它们。

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

6

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

因此您的表格如下所示:

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

1
这些属性符合哪个html规范?我似乎找不到它们。
萨曼莎·布兰纳姆

5
HTML规范5,允许以前缀“ data-”开头的自定义属性。
克里斯·布兰德斯玛

即使它们不在规格范围内,也不会破坏较旧的浏览器<HTML5
Daniel Powell

1
您只需调用以下命令即可访问“数据”字段:$(this).data('row');
WhiteAngel

0

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


尽管这可能是解决问题的宝贵提示,但好的答案也可以证明解决方案。请编辑以提供示例代码以显示您的意思。另外,也可以考虑将其写为注释。
Toby Speight

1
谢谢,我会考虑在10年后修改此答案
mkoryak
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.