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 对象模型 执行模型
Dec 06 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
详解Node全局变量global模块
Sep 28 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
Javascript类型判断相关例题及解析
Aug 26 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多个版本的分析解释
2011/07/21 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
设定php简写功能的方法
2019/11/28 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python实现从wind导入数据
2019/12/03 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
技术总监管理岗位职责
2014/03/09 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
李强为自己工作观后感
2015/06/11 职场文书