jQuery+json实现动态创建复杂表格table的方法

 更新时间:2016年10月25日 12:02:54   作者:liulun  
这篇文章主要介绍了jQuery+json实现动态创建复杂表格table的方法,涉及jQuery针对json数据的解析与表格动态创建操作相关技巧,需要的朋友可以参考下

本文实例讲述了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);
}

PS:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:

在线JSON代码检验、检验、美化、格式化工具:
http://tools.jb51.net/code/json

JSON在线格式化工具:
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具:

http://tools.jb51.net/code/json_yasuo_trans

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

    分享33个jQuery与CSS3实现的绚丽鼠标悬停效果

    今天整理了33个使用jQuery与CSS3实现绚丽的鼠标悬停效果,有些是纯CSS3的,这些效果你完全可以用在你的网页上,让网站获得更好的体验
    2014-12-12
  • jQuery.holdReady()方法用法实例

    jQuery.holdReady()方法用法实例

    这篇文章主要介绍了jQuery.holdReady()方法用法,以实例形式分析了holdReady()方法在暂停或者恢复jQuery.ready()事件的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    这篇文章主要介绍了jQuery实现响应鼠标事件的图片透明效果,涉及jQuery鼠标事件及fadeTo函数的相关使用技巧,需要的朋友可以参考下
    2016-06-06
  • jQuery中ajax的相关知识点汇总

    jQuery中ajax的相关知识点汇总

    这篇文章主要给大家介绍了关于jQuery中ajax相关知识点的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 基于JQuery的多标签实现代码

    基于JQuery的多标签实现代码

    最近在学习JQuery,其实也不叫学习,很久以前就学过,只是有一段时间没用,有些生疏了,于是就做几个小例子来练习练习,为了方便以后查找就将这些小示例记录下来
    2012-09-09
  • jQuery简单实现两级下拉菜单效果代码

    jQuery简单实现两级下拉菜单效果代码

    这篇文章主要介绍了jQuery简单实现两级下拉菜单效果代码,基于jQuery遍历简单实现菜单效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • jQuery 选择器详解

    jQuery 选择器详解

    这篇文章主要介绍了jQuery 选择器详解,图文并茂,十分不错,需要的朋友可以参考下
    2015-01-01
  • jquery浏览器滚动加载技术实现方案

    jquery浏览器滚动加载技术实现方案

    Google阅读器上有一个AJAX效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止。对于我来说再好不过了,因为我很不喜欢翻页,尤其是输入页码再定位到页。
    2014-06-06
  • 详解jQuery的animate动画方法及动画排队问题解决

    详解jQuery的animate动画方法及动画排队问题解决

    这篇文章主要介绍了jQuery的animate动画方法及动画排队问题解决的相关资料,帮助大家更好的理解和学习使用jQuery,感兴趣的朋友可以了解下
    2021-05-05
  • 内容滑动切换效果jquery.hwSlide.js插件封装

    内容滑动切换效果jquery.hwSlide.js插件封装

    这篇文章主要为大家详细介绍了jQuery开发之内容滑动切换效果的相关资料,jquery.hwSlide.js插件进行封装具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论