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下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
改造一台复古桌面收音机
2021/03/02 无线电
支持oicq头像的留言簿(二)
2006/10/09 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Python中Selenium模块的使用详解
2020/10/09 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
python3 kubernetes api的使用示例
2021/01/12 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
成品仓管员工作职责
2013/12/29 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫