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版仿Path菜单效果
Dec 15 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript常用代码段搜集
Dec 04 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
js实现时间日期校验
May 26 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中使用灵巧的体系结构
2006/10/09 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php自定义分页类完整实例
2015/12/25 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
Nodejs之http的表单提交
2017/07/07 NodeJs
浅谈关于axios和session的一些事
2017/07/13 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
vue实现拖拽效果
2019/12/23 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python如何重新加载模块
2020/07/29 Python
用python批量下载apk
2020/12/29 Python
java字符串格式化输出实例讲解
2021/01/06 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
职业生涯规划书前言
2014/04/15 职场文书
企业趣味活动方案
2014/08/21 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
综治目标管理责任书
2015/05/11 职场文书