jquery如何获得表格所在的行数和列数

我想实现这样的功能：有一个表格，点击某一个单元格就显示该单元格的位置（行数和列数）。请用jquery完成！多谢。
补充一点，这个表格是动态生成的，每一个单元格不含任何位置信息，如class="cell_x_y"等。

举报该文章

相关建议推荐于2016-10-04

jQuery 提供了index()方法用于获取第一个匹配元素相对于其同胞元素的 index 位置（从0开始计数），基本语法为：$(selector).index()。因此当前 tr 的 index 可以得到行数，当前 td 的 index 可以得到列数。实例演示如下:

1、HTML结构

</table>

2、jquery代码

$(function(){

$("table td").click(function() {

var row = $(this).parent().index() + 1; // 行位置

var col = $(this).index() + 1; // 列位置

alert("当前位置：第"+row+"行，第"+col+"列")

});

3、效果演示

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/m28mmsqq.html

其他看法

第1个回答推荐于2018-02-26

思路是这样的，你点击一个td，然后找到这个td的父节点tr，然后统计这个tr前面的tr个数，就是行数,而这个td前面的td个数，就是列数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tableTest.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//页面装载就加载函数
$(document).ready(function() {
//给所有的td单元格绑定一个click事件
//如果这个table的id为table1，那单给table1的所有td加click事件代码为：
// var tds = $("#table1").find("td");
var tds = $("td");
tds.click(tdclick);
});

function tdclick() {
//var td = $(this);
//var text = td.text();
// $(this)表示这个td单元格，
// .parent("tr")表示这个td的父节点
// .prevAll()表示这个tr前面有多少个tr
var hang = $(this).parent("tr").prevAll().length;
var lie = $(this).prevAll().length;
hang = Number(hang)+1;//字符串变为数字
lie = Number(lie)+1;
alert("第"+hang+"行"+"第"+lie+"列");
}
</script>
</head>

<body>
<table border="1px" width="300" id="table1">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
q
</td>
<td>
t
</td>
</tr>
<tr>
<td>
a
</td>
<td>
2
</td>
<td>
q
</td>
<td>
y
</td>
</tr>
<tr>
<td>
b
</td>
<td>
2
</td>
<td>
3
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
</td>
<td>
2
</td>
<td>
q
</td>
<td>
4
</td>
</tr>
<tr>
<td>
d
</td>
<td>
2
</td>
<td>
q
</td>
<td>
f
</td>
</tr>
</table>
</body>
</html>本回答被提问者和网友采纳

第2个回答 2020-01-17

思路是这样的，你点击一个td，然后找到这个td的父节点tr，然后统计这个tr前面的tr个数，就是行数,而这个td前面的td个数，就是列数 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>tableTest.html</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> //页面装载就加载函数 $(document).ready(function() { //给所有的td单元格绑定一个click事件 //如果这个table的id为table1，那单给table1的所有td加click事件代码为： // var tds = $("#table1").find("td"); var tds = $("td"); tds.click(tdclick); }); function tdclick() { //var td = $(this); //var text = td.text(); // $(this)表示这个td单元格， // .parent("tr")表示这个td的父节点 // .prevAll()表示这个tr前面有多少个tr var hang = $(this).parent("tr").prevAll().length; var lie = $(this).prevAll().length; hang = Number(hang)+1;//字符串变为数字 lie = Number(lie)+1; alert("第"+hang+"行"+"第"+lie+"列"); } </script> </head> <body> <table border="1px" width="300" id="table1"> <tr> <td> 1 </td> <td> 2 </td> <td> q </td> <td> t </td> </tr> <tr> <td> a </td> <td> 2 </td> <td> q </td> <td> y </td> </tr> <tr> <td> b </td> <td> 2 </td> <td> 3 </td> <td> b </td> </tr> <tr> <td> c </td> <td> 2 </td> <td> q </td> <td> 4 </td> </tr> <tr> <td> d </td> <td> 2 </td> <td> q </td> <td> f </td> </tr> </table> </body> </html>

第3个回答 2019-02-17

思路是这样的，你点击一个td，然后找到这个td的父节点tr，然后统计这个tr前面的tr个数，就是行数,而这个td前面的td个数，就是列数
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN">
<html>
<head>
<title>tableTest.html</title>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<script
type="text/javascript"
src="js/jquery.js"></script>
<script
type="text/javascript">
//页面装载就加载函数
$(document).ready(function()
{
//给所有的td单元格绑定一个click事件
//如果这个table的id为table1，那单给table1的所有td加click事件代码为：
//
var
tds
=
$("#table1").find("td");
var
tds
=
$("td");
tds.click(tdclick);
});
function
tdclick()
{
//var
td
=
$(this);
//var
text
=
td.text();
//
$(this)表示这个td单元格，
//
.parent("tr")表示这个td的父节点
//
.prevAll()表示这个tr前面有多少个tr
var
hang
=
$(this).parent("tr").prevAll().length;
var
lie
=
$(this).prevAll().length;
hang
=
Number(hang)+1;//字符串变为数字
lie
=
Number(lie)+1;
alert("第"+hang+"行"+"第"+lie+"列");
}
</script>
</head>
<body>
<table
border="1px"
width="300"
id="table1">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
q
</td>
<td>
t
</td>
</tr>
<tr>
<td>
a
</td>
<td>
2
</td>
<td>
q
</td>
<td>
y
</td>
</tr>
<tr>
<td>
b
</td>
<td>
2
</td>
<td>
3
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
</td>
<td>
2
</td>
<td>
q
</td>
<td>
4
</td>
</tr>
<tr>
<td>
d
</td>
<td>
2
</td>
<td>
q
</td>
<td>
f
</td>
</tr>
</table>
</body>
</html>

第4个回答 2009-04-29

table的click事件中

var cell = "";
if(navigator.userAgent.indexOf("MSIE") > 0)
cell = event.srcElement;
else
cell = arguments.callee.caller.arguments[0].target;

var col = cell.cellIndex;//列数
var row = row.rowIndex;//行数

相似回答

大家正在搜