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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jquery 上下滚动广告
Jun 17 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
javascript实现计算器功能详解流程
Nov 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
Js中sort()方法的用法
2006/11/04 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
python logging模块的使用详解
2020/10/23 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
C语言中break与continue的区别
2012/07/12 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
小学端午节活动方案
2014/03/13 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
优秀团支部申报材料
2014/12/26 职场文书
万能检讨书
2015/01/27 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库