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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
详解用node编写自己的cli工具
May 23 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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实现文件下载断点续传详解
2014/10/15 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
python正则表达式中的括号匹配问题
2014/12/14 Python
python 性能提升的几种方法
2016/07/15 Python
Python深入06——python的内存管理详解
2016/12/07 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python 异或加密字符串的实例
2018/10/14 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
浅析Python面向对象编程
2020/07/10 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
领导检查欢迎词
2014/01/14 职场文书
大学军训感言800字
2014/02/27 职场文书
公司股东合作协议书
2014/09/14 职场文书
工作简报格式范文
2015/07/21 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python