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获取iframe中的dom对象(两种方法)
Jul 02 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
python实现数独算法实例
2015/06/09 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
WxPython实现无边框界面
2019/11/18 Python
python实现猜数游戏
2020/03/27 Python
python绘制趋势图的示例
2020/09/17 Python
Python eval函数原理及用法解析
2020/11/14 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
自主招生自荐信格式
2013/12/03 职场文书
同事吵架检讨书
2014/02/05 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang