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 相关文章推荐
React中jquery引用的实现方法
Sep 12 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现简单评论功能
Aug 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
PHP文本操作类
2006/11/25 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Python获取远程文件大小的函数代码分享
2014/05/13 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python ddt实现数据驱动
2018/03/14 Python
Python语法分析之字符串格式化
2019/06/13 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
品恩科技软件测试面试题
2014/10/26 面试题
投标邀请书范文
2014/01/31 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
经典祝酒词大全
2015/08/12 职场文书