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禁止页面操作的示例代码
Dec 17 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
详解用JS添加和删除class类名
Mar 25 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php标签云的实现代码
2012/10/10 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
json跟xml的对比分析
2008/06/10 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python发送邮件实现基础解析
2020/08/14 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
应届生求职信范文
2014/06/30 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
先进个人总结范文
2015/02/15 职场文书
2015团员个人年度总结
2015/11/24 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android