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 相关文章推荐
重写javascript中window.confirm的行为
Oct 21 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue请求服务器数据后绑定不上的解决方法
Oct 30 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python socket 聊天室实例代码详解
2019/11/14 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
介绍一下write命令
2012/09/24 面试题
2014年办公室个人工作总结
2014/11/12 职场文书