jQuery+json实现动态创建复杂表格table的方法


Posted in Javascript onOctober 25, 2016

本文实例讲述了jQuery+json实现动态创建复杂表格table的方法。分享给大家供大家参考,具体如下:

function SetSubTable() {
  var obj = jQuery.parseJSON($("#SubJsonStrValue").val());
  window.ALLPARAMTERS = obj;
  var row_str = "";
  var span_num = 1
  for (var i = 0; i < obj.length; i++) {
    if (obj[i].ParamNames.length > 0) {
      row_str += '<tr><td rowspan="' + obj[i].ParamNames.length + '"><input type="checkbox" name="_'+obj[i].Id+'" />' + obj[i].Name + '</td>';
      for (var j = 0; j < obj[i].ParamNames.length; j++) {
        if (j != 0) {
          row_str += "<tr>";
        }
        row_str += '<td><input type="checkbox" name="p_'+obj[i].ParamNames[j].Id+'_'+obj[i].Id+'" />' + obj[i].ParamNames[j].Name + '</td><td>';
        for (var k = 0; k < obj[i].ParamNames[j].ListItems.length; k++) {
          row_str += obj[i].ParamNames[j].ListItems[k].Name+"|";
        }
        row_str = row_str.substring(0, row_str.length - 2);
        row_str += "</td><td>";
        if (obj[i].ParamNames[j].CanMultiSelecte) {
          row_str += "多选";
        } else {
          row_str += "单选";
        }
        row_str += "</td></tr>";
      }
    }
  }
  $("#sub_table_header").after(row_str);
}
Javascript 相关文章推荐
jquery 锁定弹出层实现代码
Feb 23 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 #Javascript
JavaScript prototype属性详解
Oct 25 #Javascript
对Angular.js Controller如何进行单元测试
Oct 25 #Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 #Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 #Javascript
You might like
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python 实现多维数组(array)排序
2020/02/28 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
2014年大学生就业规划书
2014/04/04 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
毕业生自荐信范文
2015/03/05 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
Go 语言结构实例分析
2021/07/04 Golang
如何利用python实现列表嵌套字典取值
2022/06/10 Python