本文主要介绍了jQuery实现获取table中鼠标click点击位置行号与列号的方法,涉及jQuery事件响应及针对table表格元素相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。
先来看看运行效果:
具体代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html>
<html>
<head lang= "en" >
<meta charset= "UTF-8" >
<title>www.jb51.net 鼠标点击位置行列号</title>
</head>
<body>
<table class = "mytable" border=1>
<tr>
<th style= "width: 160px;" >表头一</th>
<th style= "width: 160px;" >表头二 </th>
<th style= "width: 160px;" >表头三</th>
<th style= "width: 160px;" >表头四</th>
<th style= "width: 160px;" >表头五</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
<td>第一行第五列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
<td>第二行第五列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
<td>第三行第五列</td>
</tr>
<tr>
<td>第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
<td>第四行第五列</td>
</tr>
</table>
<script src= "jquery-1.7.2.min.js" ></script>
<script>
$(document).ready( function (){
$( ".mytable td" ).click( function (){
var tdSeq = $(this).parent().find( "td" ).index($(this)[0]);
var trSeq = $(this).parent().parent().find( "tr" ).index($(this).parent()[0]);
alert( "第" + (trSeq + 1) + "行,第" + (tdSeq + 1) + "列" );
});
})
</script>
</body>
</html>
|
Salin selepas log masuk
相关推荐:
checkbox实现click事件触发span元素内容改变
AngularJS的ng-click传参的方法
Jquery对新插入的节点 绑定Click事件失效的解决方法
Atas ialah kandungan terperinci 详解jQuery实现获取table中鼠标click点击位置行号与列号. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!