JQuery 中的表行和列号

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

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

jquery

247555 次浏览

小开

在创建表时，是否可以在单元格中输出该数据？

所以你的桌子应该是这样的:

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

小开

最好将一个 click 处理程序绑定到整个表，然后使用 event.target 获取被单击的 TD。现在是凌晨1:20

小开

最佳答案

你可以在给定的上下文中使用核心/索引函数，例如，你可以检查 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);
});

检查一个正在运行的示例给你。

小开

在我的脑海中，一种方法就是抓住所有以前的元素，然后数一数。

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

小开

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

小开

点击获取列索引:

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

点击获取行索引:

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