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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Vue实现购物车功能
Apr 27 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
Vue2.0 实现移动端图片上传功能
May 30 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
Vue.js实现可编辑的表格
Dec 11 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
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js文字横向滚动特效
2015/11/11 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Python字符串处理函数简明总结
2015/04/13 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Windows下安装Scrapy
2018/10/17 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
python多线程和多进程关系详解
2020/12/14 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
大学生上课迟到检讨书
2014/10/15 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
党纪处分决定书
2015/06/24 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python