Jq通过td获取同行其它列td的方法


Posted in Javascript onOctober 05, 2016

假设有如下样式表结构

Jq通过td获取同行其它列td的方法

在制表时,采取的 手把手教你在springMVC中不用框架写表格 这篇博客里面写的制表方法,如下所示

function refreshTable(objs){
	$("#ObjTables").html("");
    for(i in objs){
  	  if(objs[i].obj_Type != "FRAME"){
  	  $("#ObjTables").append("<tr><td>"+objs[i].obj_Id+
          "</td><td>"+objs[i].obj_Name+
          "</td><td>"+objs[i].ziduan_Name+
          "</td><td>"+objs[i].obj_Type+
          "</td><tr>");
  	  }else{
  		  $("#ObjTables").append("<tr><td>"+objs[i].obj_Id+
            "</td><td>"+objs[i].obj_Name+
            "</td><td>"+objs[i].ziduan_Name+
            "</td><td id='12'>"+objs[i].obj_Type+"<button onclick='getFrameContent(this)' data-toggle='modal' data-target='#myModal' >+</button>"+
            "</td><tr>");
  	  }
     }
};

与之前博客写的不一样的地方在于,这里通过objs的obj_Type,进行了区别化的制表,然后,对于Type为FRAME的行,添加了button选项,来显示更多的表,即表中有表,这个功能后面有机会再介绍

注意到

getFrameContent(this)

当click这个button时,调用该方法

function getFrameContent(frameSelect){
    //获取点击的一行tr
    var tr = $(frameSelect).parent().parent();
    //获取tr的所有td元素
    var b = a.children("td");
    //取得第三列元素
    var c = b.eq(2);
    //显示第三列的值
    var d= c.text();
	alert(d);
}

这里函数里面为了演示,没有做具体操作,就是通过这几个语句获取到了点击的某一行第三列的值,其他列同理.

如果想获取其它行(一般很少有这种情况),就需要在第一句话

var tr = $(frameSelect).parent().parent().parent();

获取到table元素,或者直接用$("#XXX")也可以,但是这就和我们点击的某一个具体按钮没有直接关系了

最后,页面弹出效果

Jq通过td获取同行其它列td的方法

成功啦

以上就是小编为大家带来的Jq通过td获取同行其它列td的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 #Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 #Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 #Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 #Javascript
总结Javascript中数组各种去重的方法
Oct 04 #Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 #Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python3基础之list列表实例解析
2014/08/13 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python感知机实现代码
2019/01/18 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python实现canny边缘检测
2020/09/14 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
民间借贷纠纷答辩状
2015/08/03 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
pt-archiver 主键自增
2022/04/26 MySQL
详解PyTorch模型保存与加载
2022/04/28 Python