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 Study Notes 学习笔记(一)
Aug 04 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python基础之入门必看操作
2017/07/26 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
财务总监管理职责范文
2014/03/09 职场文书
现金出纳岗位职责
2014/03/15 职场文书
参观接待方案
2014/03/17 职场文书
委托书范文
2014/04/02 职场文书
教师节标语大全
2014/10/07 职场文书
七年级作文之英语老师
2019/10/28 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
改造DE1103三步曲
2022/04/07 无线电