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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
提示$ 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程序的方法
2009/03/09 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
python爬虫超时的处理的实例
2018/12/19 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
详解python的变量缓存机制
2021/01/24 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
益模软件Java笔试题
2012/03/27 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
最新教师自我评价分享
2013/11/12 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
三好学生事迹材料
2014/12/24 职场文书
青年志愿者活动感想
2015/08/07 职场文书
小组口号霸气押韵
2015/12/24 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
python 批量压缩图片的脚本
2021/06/02 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python