jquery 获取当前元素表格所在的行列数

最新推荐文章于 2022-06-02 10:47:02 发布

原创最新推荐文章于 2022-06-02 10:47:02 发布 · 692 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的表格点击事件案例，当点击表格中的任意单元格时，能够准确地获取并显示该单元格所在的行和列位置。通过简单的JavaScript代码实现了对表格数据的交互式操作。

<!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="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.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>