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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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 验证图片生成函数
2009/05/21 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python操作redis方法总结
2018/06/06 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Django ModelForm操作及验证方式
2020/03/30 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
《九寨沟》教学反思
2014/04/08 职场文书
班级团队活动方案
2014/08/14 职场文书
初中家长评语大全
2014/12/26 职场文书
慰问信格式
2015/02/14 职场文书
团委工作总结2015
2015/04/02 职场文书
初三英语教学反思
2016/02/15 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL