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 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jQuery select操作控制方法小结
May 26 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
node.js的Express服务器基本使用教程
Jan 09 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
javascript求日期差的方法
2016/03/02 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python实现井字棋小游戏
2020/03/04 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
深入了解python列表(LIST)
2020/06/08 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
贷款委托书怎么写
2014/08/02 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
公司出纳岗位职责
2015/03/31 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB