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 相关文章推荐
jquery 插件学习(一)
Aug 06 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 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+javascript模拟Matrix画面
2006/10/09 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
2017/05/27 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python实现备份目录的方法
2015/08/03 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python实现视频下载功能
2017/03/14 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
金融学专业大学生职业生涯规划
2014/03/07 职场文书
2014组织生活会方案
2014/05/19 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
社会实践活动报告
2015/02/05 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python