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切换div css注意的细节
Dec 10 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
vue transition 在子组件中失效的解决
Nov 12 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 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 如何向 MySQL 发送数据
2006/10/09 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
vue中添加mp3音频文件的方法
2018/03/02 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python中常用信号signal类型实例
2018/01/25 Python
对python的输出和输出格式详解
2018/12/08 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
写好自荐信的要点
2013/11/06 职场文书
平安建设实施方案
2014/03/19 职场文书
优秀护士先进事迹
2014/05/08 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
python 离散点图画法的实现
2022/04/01 Python
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS