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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现全选按钮
Jan 01 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP4实际应用经验篇(4)
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
初学JavaScript第二章
2008/09/30 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python正则表达式re之compile函数解析
2017/10/25 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python实现logistic分类算法代码
2020/02/28 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
pandas分批读取大数据集教程
2020/06/06 Python
python操作toml文件的示例代码
2020/11/27 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis