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

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

 我来答

5个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

learneroner

高粉答主

推荐于2016-10-04 · 关注我不会让你失望

知道大有可为答主

回答量：1.1万

采纳率：91%

帮助的人：6555万

我也去答题访问个人页

关注

展开全部

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、效果演示

已赞过 已踩过<

评论收起

神魔堎
推荐于2018-02-26 · TA获得超过142个赞

知道答主

回答量：76

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

思路是这样的，你点击一个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>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

居秀英银娟
2020-01-17 · TA获得超过3.8万个赞

知道大有可为答主

回答量：1.4万

采纳率：30%

帮助的人：971万

我也去答题访问个人页

关注

展开全部

思路是这样的，你点击一个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>

已赞过 已踩过<

评论收起

简访皮鸿振
2019-02-17 · TA获得超过3587个赞

知道大有可为答主

回答量：3179

采纳率：26%

帮助的人：420万

我也去答题访问个人页

关注

展开全部

思路是这样的，你点击一个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>

已赞过 已踩过<

评论收起

27115
2009-04-29 · TA获得超过1116个赞

知道大有可为答主

回答量：1708

采纳率：0%

帮助的人：1060万

我也去答题访问个人页

关注

展开全部

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;//行数

已赞过 已踩过<

评论收起

更多回答（3）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

截图转excel-视频压缩在线-一键压缩图片大小kb

截图转excel-各种jpg，bmp，png格式都能在线压缩，无需下载，即传即压，照片在线压缩，视频压缩，不压缩画质，分辨率高，原画质无损!支持各类文件格式转换

tpspys.najgzeyu.cn广告

pdf压缩，在线转换工具，操作简单的线上工具箱

pdf压缩，pdf在线转换器，pdf一键压缩，在线文档格式工具，支持word/ppt/excel等多种类型格式互转，无需下载在线pdf转换器，点击转换

pdf.hength.cn广告

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

您可能关注的内容

其他类似问题

为你推荐：