jQuery实现获取table中鼠标click点击位置行号与列号的方法

更新时间：2017年10月09日 11:43:09 作者：happymagic

这篇文章主要介绍了jQuery实现获取table中鼠标click点击位置行号与列号的方法,涉及jQuery事件响应及针对table表格元素相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!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>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery
table

jQuery实现tag便签去重效果的方法
这篇文章主要介绍了jQuery实现tag便签去重效果的方法,较为详细的分析了html页面及js代码的实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-01-01
jQuery对象与DOM对象转换方法详解
这篇文章主要介绍了jQuery对象与DOM对象的转换方法,结合实例形式分析了jQuery对象及DOM对象的作用与二者的相互转换技巧,需要的朋友可以参考下
2016-05-05
基于cookie实现zTree树刷新后展开状态不变
这篇文章主要为大家详细介绍了如何基于cookie实现zTree树刷新后，展开状态不变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
jQuery使用andSelf()来包含之前的选择集
使用Destructive Method对wrapper set进行选择、过滤之后会产生一个新的结果集,可以使用andSelf()来包含之前的选择集
2014-05-05
jQuery实现鼠标悬停显示提示信息窗口的方法
这篇文章主要介绍了jQuery实现鼠标悬停显示提示信息窗口的方法,涉及jQuery操作鼠标事件及show、hide等方法的使用技巧,需要的朋友可以参考下
2015-04-04
分享几个超级震憾的图片特效
这次主要是来分享几个个人觉得十分震憾的图片特效，有jQuery的，有CSS3的，有很萌的乌鸦动画，也有简单朴实的图片播放动画，当然有些你可能已经看到过了，不过也没关系，你能路过就算是对我的支持了
2012-01-01
浅谈jQuery中Ajax事件beforesend及各参数含义
下面小编就为大家带来一篇浅谈jQuery中Ajax事件beforesend及各参数含义。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-12-12
jquery鼠标停止移动事件
这篇文章主要介绍了jquery鼠标停止移动事件，有需要的朋友可以参考一下
2013-12-12
jquery仿百度百科底部浮动导航特效
这篇文章主要介绍了jquery仿百度百科底部浮动导航特效,需要的朋友可以参考下
2015-08-08
JQuery表单元素取值赋值方法总结
这篇文章主要介绍了JQuery表单元素取值赋值方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05