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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
JS 实现导航栏悬停效果
2013/09/23 Javascript
js返回顶部实例分享
2016/12/21 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
python实现保存网页到本地示例
2014/03/16 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python如何实现线程间通信
2020/07/30 Python
python MD5加密的示例
2020/10/19 Python
大学专科生推荐信范文
2013/11/23 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
初中班主任评语
2014/04/24 职场文书
社会发展项目建议书
2014/08/25 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
求职自我推荐信
2015/03/24 职场文书
毕业典礼主持词
2015/06/29 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS