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 Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python write无法写入文件的解决方法
2019/01/23 Python
python双向链表原理与实现方法详解
2019/12/03 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
结对共建协议书
2014/08/20 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
酒店员工手册范本
2015/05/14 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Python加密技术之RSA加密解密的实现
2022/04/08 Python