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 相关文章推荐
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 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
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
Python格式化css文件的方法
2015/03/10 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python生成密码库功能示例
2017/05/23 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python代码xml转txt实例
2020/03/10 Python
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
党员大会主持词
2014/04/02 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
信息技术国培研修日志
2015/11/13 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang