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中typeof的用途介绍
Apr 11 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
js读取配置文件自写
Feb 11 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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根据年月获取季度的方法
2014/03/31 PHP
php实现求相对时间函数
2015/06/15 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
thinkphp分页集成实例
2017/07/24 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python求解水仙花数的方法
2015/05/11 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
keras 多gpu并行运行案例
2020/06/10 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
色戒观后感
2015/06/12 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书