jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路


Posted in Javascript onApril 10, 2013

花了一晚上的时间解决了一个看似很容易的问题。今晚做的这个东西中由于要获取某列中的一个ID值。如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得。

网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值。页面如下所示:
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路 
具体操作就是点击“删除”按钮,然后调用jquery插件页面,这时候需要获得相应行的“ID”进行操作。我的方法是:

先定义一个行数与列数的全局变量,然后在鼠标经过按钮时获得此行的行数与列数并付给此全局变量:

var trNum; 
var tdNum; 
$(function(){ 
//定义一个鼠标经过事件 
$('#users td').hover( 
function(){ 
//获得table的行号 
trNum = $(this).parent().parent().find('tr').index($(this).parent()[0])+ 1; 
//获得table的列号 
tdNum = $(this).parent().find('td').index($(this)[0])+ 1; 
} 
);

其中,“users”为此table的ID.然后再根据此ID进行业务处理,如下所示:
01.//点击“弹出框”选择“确定”后的业务处理 
$("#dialog-confirm").dialog({ 
autoOpen:false, 
resizable:false, 
height:150, 
modal:true, 
buttons:{ 
"确定":function(){ 
var au_id = $('#users').find('tr:eq(' + (trNum) + ')').find('td:eq(0)').text(); //获得对应第一列的ID值 
//业务处理省略 
…… 
}, 
"取消":function(){ 
$(this).dialog("close"); 
} 
}} 
);

小问题凝聚着大智慧,通过解决问题提高自己学习能力,解决问题的能力,是我一直崇尚的真理!
Javascript 相关文章推荐
javascript中字符串的定义示例代码
Dec 19 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
Javascript闭包实例详解
Nov 29 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
小程序如何构建骨架屏
May 29 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
提示$ is not defined错误分析及解决
Apr 09 #Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 #Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 #Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 #Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 #Javascript
关于JavaScript中的关联数组分析
Apr 09 #Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 #Javascript
You might like
PHP四种基本排序算法示例
2015/04/09 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
通信工程专业女生个人求职信
2013/09/21 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
法人委托书范本
2014/04/04 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
谢师宴家长致辞
2015/07/27 职场文书
关于幸福的感言
2015/08/03 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
CSS基础详解
2021/10/16 HTML / CSS