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还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
微信小程序实现购物车小功能
Dec 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 cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
opencv实现简单人脸识别
2021/02/19 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
教师申诉制度
2014/01/29 职场文书
内科护士节演讲稿
2014/09/11 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python