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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
javascript实现密码验证
Nov 10 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
JavaScript中reduce()的用法
May 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python字符串中查找子串小技巧
2015/04/10 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
解决uWSGI的编码问题详解
2017/03/24 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
股东授权委托书范本
2014/09/13 职场文书
家长反馈意见及建议
2015/06/03 职场文书
学习经验交流会总结
2015/11/02 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Python快速实现一键抠图功能的全过程
2021/06/29 Python