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的变量作用域深入理解
Oct 25 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
JS代码实现页面切换效果
Jan 10 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
用户的详细注册和判断
2006/10/09 PHP
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
Snoopy类使用小例子
2008/04/15 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
django+mysql的使用示例
2018/11/23 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
小学班主任工作随笔
2015/08/15 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL