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 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
javascript引用对象的方法
2007/01/11 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
django rest framework 自定义返回方式
2020/07/12 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
新领导上任欢迎词
2014/01/13 职场文书
2014年残联工作总结
2014/11/21 职场文书
2015年学生资助工作总结
2015/05/25 职场文书