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 append与appendTo方法比较
May 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简单评论区功能
Oct 26 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
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
Vue props用法详解(小结)
2018/07/03 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue如何截取字符串
2019/05/06 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python中rb含义理解
2020/06/18 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
应用心理学个人的求职信
2013/12/08 职场文书
《尊严》教学反思
2014/02/11 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技