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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
Javascript和jquery在selenium的使用过程
Oct 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
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP对象实例化单例方法
2017/01/19 PHP
php微信开发之图片回复功能
2018/06/14 PHP
扩展String功能方法
2006/09/22 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python针对excel的操作技巧
2018/03/13 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
工资收入证明
2014/10/07 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
家长会欢迎词
2015/01/23 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python