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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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/06/24 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php实现小程序支付完整版
2018/10/09 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
毕业自我评价范文
2013/11/17 职场文书
销售总监工作职责
2013/11/21 职场文书
教师业务培训方案
2014/05/01 职场文书
2014年学前班工作总结
2014/12/08 职场文书
写给医院的感谢信
2015/01/22 职场文书
车队安全员岗位职责
2015/02/15 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL