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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
elementui实现预览图片组件二次封装
Dec 29 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基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python实现ping指定IP的示例
2018/06/04 Python
python 默认参数相关知识详解
2019/09/18 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
新春寄语大全
2014/04/09 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
走进敬老院活动总结
2014/07/10 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
python turtle绘图命令及案例
2021/11/23 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android