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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
代码解析React中setState同步和异步问题
Jun 03 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
基于mysql的论坛(1)
2006/10/09 PHP
smarty的保留变量问题
2008/10/23 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python 备份程序代码实现
2017/03/06 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python能做什么
2020/06/02 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
python中pickle模块浅析
2020/12/29 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
如何实现一个自定义类的序列化
2012/05/22 面试题
校园文明标语
2014/06/13 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
企业介绍信范文
2015/01/30 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电