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 格式字符串的应用
Mar 29 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
vue自动化表单实例分析
May 06 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
JavaScript canvas实现文字时钟
Jan 10 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自动识别当前使用移动终端
2018/05/21 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
生产部统计员岗位职责
2014/01/05 职场文书
论文评语大全
2014/04/29 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Elasticsearch 索引操作和增删改查
2022/04/19 Python