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 28 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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 无限级 SelectTree 类
2009/05/19 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js实现日期级联效果
2014/01/23 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
PyQt5每天必学之组合框
2018/04/20 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
路政管理专业推荐信
2013/11/11 职场文书
美工的岗位职责
2013/11/14 职场文书
优秀经理事迹材料
2014/02/01 职场文书
奉献演讲稿范文
2014/05/21 职场文书
个人安全生产承诺书
2014/05/22 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
我的生日感言
2015/08/03 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书