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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
递归列出所有文件和目录
2006/10/09 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
使图片旋转的3种解决方案
2013/11/21 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
Angular路由简单学习
2016/12/26 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
webpack常用构建优化策略小结
2019/11/21 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
python中随机函数random用法实例
2015/04/30 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python中bisect的使用方法
2019/12/31 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
django 模型字段设置默认值代码
2020/07/15 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
某公司部分笔试题
2013/11/05 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
golang slice元素去重操作
2021/04/30 Golang