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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
浅谈Vue.set实际上是什么
Oct 17 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 文本文件的读取效率
2012/02/10 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
解析Python3中的Import
2019/10/13 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
Django admin组件的使用
2020/10/24 Python
python 数据类型强制转换的总结
2021/01/25 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
2015年度优秀员工推荐信
2015/03/23 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle