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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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句法规则详解 入门学习
2011/11/09 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php定界符
2014/06/19 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
再论Javascript的类继承
2011/03/05 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
django中send_mail功能实现详解
2018/02/06 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python global关键字的用法详解
2019/09/05 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
自荐信的格式
2014/03/10 职场文书
工商管理自荐书
2014/07/06 职场文书
委托公证书格式
2015/01/26 职场文书
培训心得体会怎么写
2016/01/25 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP