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


Posted in jQuery onOctober 09, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>3water.com 鼠标点击位置行列号</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 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 #jQuery
jQuery实现html双向绑定功能示例
Oct 09 #jQuery
jqueryUI tab标签页代码分享
Oct 09 #jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
You might like
Javascript 汉字字节判断
2009/08/01 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
jQuery.each使用详解
2015/07/07 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
js实现日历
2020/11/07 Javascript
Python简单日志处理类分享
2015/02/14 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python注释详解
2016/06/01 Python
python中logging库的使用总结
2017/10/18 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
用Python逐行分析文件方法
2019/01/28 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python shelve模块实现解析
2019/08/28 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
python 5个顶级异步框架推荐
2020/09/09 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
党章学习思想汇报
2014/01/14 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
springboot实现string转json json里面带数组
2022/06/16 Java/Android