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 29 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
公司同意接收函
2014/01/13 职场文书
买房协议书
2014/04/11 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
安全保证书怎么写
2015/02/28 职场文书
自荐信格式范文
2015/03/04 职场文书
中秋联欢会主持词
2015/07/04 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Pytest中conftest.py的用法
2021/06/27 Python
pandas中对文本类型数据的处理小结
2021/11/01 Python
Python+tkinter实现高清图片保存
2022/03/13 Python