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 字符串连接[性能比较]
May 10 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 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
apache中为php 设置虚拟目录
2014/12/17 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
jquery 日期分离成年月日的代码
2010/05/14 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
python list的index()和find()的实现
2020/11/16 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
应届生求职信写作技巧
2013/10/24 职场文书
物流司机岗位职责
2013/12/28 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
关于工作经历的证明书
2014/10/11 职场文书
电影建国大业观后感
2015/06/01 职场文书
2016情人节宣传语
2015/07/14 职场文书
人代会简报
2015/07/21 职场文书
教师教育心得体会
2016/01/19 职场文书
七年级思品教学反思
2016/02/20 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
Python OpenCV实现图形检测示例详解
2022/04/08 Python