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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery实现轮播图特效
Apr 12 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
用Python编写web API的教程
2015/04/30 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python进行数据提取的方法总结
2016/08/22 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python 备份程序代码实现
2017/03/06 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python多进程并发demo实例解析
2019/12/13 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python中sys模块是做什么用的
2020/08/16 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
工作评语大全
2014/04/26 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
电话营销开场白
2015/05/29 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers