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 DataTable实现前后台动态分页
Jun 17 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery实现穿梭框效果
Jan 19 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
js验证账户名是否重复
2020/05/26 Javascript
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
如何基于python测量代码运行时间
2019/12/25 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python实现在线翻译
2020/06/18 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
临床医学大学生求职信
2013/09/28 职场文书
销售自荐信
2013/10/22 职场文书
初婚初育证明
2014/01/14 职场文书
三个儿子教学反思
2014/02/03 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
个人典型事迹材料
2014/12/30 职场文书
教师年度考核个人总结
2015/02/12 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Python Pandas 删除列操作
2022/03/16 Python