初探原生js根据json数据动态创建table

小生以实习生的职位进入了一家非纯软件的公司做asp.net开发，大半个月下来发现公司里居然没有前端工程师，这令我很诧异，跟着公司做项目，发现前端后台没有明显的分工，使用传统的WebFrom开发模式，一个Button都要返回服务器处理一次，服务器说它觉得很累。

而我最近由于公司有很多很紧急的任务交给我，所以之前说的那个个人博客暂停了一下。由于我想尽量减轻服务器负担，尽量让一些逻辑在浏览器端完成，浏览器端与服务器之间仅有数据交换，尽可能地把逻辑留给浏览器端处理。显然，js的强大之处就显示出来了——当然，使用jquery框架也不错，但是我希望使用原生js，这样能达到深入理解的效果。

我的目的是根据服务器端返回的json数据来动态生成一个table，二话不说，马上上代码，代码里也有注释，相信各位看官能看懂。

  1.  
  2.  动态生成table
  1.  
  2. /*
  3. createTable(toid, jsondata, check, edit, del)：用于动态创建table，第0行为表头，数据里必须包含表头和数据的id
  4. @toid：创建table到id为toid的节点下
  5. @jsondata：用于创建table的json格式的数据（须在jsondata里包含表头标题）
  6. @check：是否创建查看按钮
  7. @edit：是否创建编辑按钮
  8. @del：是否创建删除按钮
  9. */
  10. function createTable(toid, jsondata, check, edit, del) {
  11.     var table = document.createElement("table");
  12.     var tr, td;
  13.     for (i in jsondata) {
  14.         tr = document.createElement("tr");               //创建tr
  15.         //________________创建表头________________________________________
  16.         if (i == 0) {
  17.             for (j in jsondata[i]) {                                      //根据数据在tr内创建td
  18.                 td = document.createElement("td");
  19.                 td.appendChild(document.createTextNode(jsondata[i][j]));
  20.                 if (j == "id") {                                                   //创建隐藏的td来存放id
  21.                     td.style.display = "none";
  22.                 }
  23.                 td.style.background = "#C1DAD7";              //设置表头颜色
  24.                 tr.appendChild(td);
  25.             }
  26.             if (check == true) {                                                 //创建查看按钮
  27.                 td = document.createElement("td");
  28.                 td.appendChild(document.createTextNode("查看"));
  29.                 td.style.background = "#C1DAD7";              //设置表头颜色
  30.                 tr.appendChild(td);
  31.             }
  32.             if (edit == true) {                                              //创建编辑按钮
  33.                 td = document.createElement("td");
  34.                 td.appendChild(document.createTextNode("编辑"));
  35.                 td.style.background = "#C1DAD7";          //设置表头颜色
  36.                 tr.appendChild(td);
  37.             }
  38.             if (del == true) {                                                 //创建删除按钮
  39.                 td = document.createElement("td");
  40.                 td.appendChild(document.createTextNode("删除"));
  41.                 td.style.background = "#C1DAD7";         //设置表头颜色
  42.                 tr.appendChild(td);
  43.             }
  44.         }
  45.         //________________创建数据行________________________________________
  46.         else {
  47.             for (j in jsondata[i]) {                                      //根据数据在tr内创建td
  48.                 td = document.createElement("td");
  49.                 td.appendChild(document.createTextNode(jsondata[i][j]));
  50.                 if (j == "id") {                                              //创建隐藏的td来存放id
  51.                     td.style.display = "none";
  52.                 }
  53.                 tr.appendChild(td);
  54.             }
  55.             if (check == true) {                                          //创建查看按钮
  56.                 td = document.createElement("td");
  57.                 var btnCheck = document.createElement("button");
  58.                 btnCheck.appendChild(document.createTextNode("查看"));
  59.                 td.appendChild(btnCheck);
  60.                 tr.appendChild(td);
  61.             }
  62.             if (edit == true) {                            //创建编辑按钮
  63.                 td = document.createElement("td");
  64.                 var btnEdit = document.createElement("button");
  65.                 btnEdit.appendChild(document.createTextNode("编辑"));
  66.                 td.appendChild(btnEdit);
  67.                 tr.appendChild(td);
  68.             }
  69.             if (del == true) {                             //创建删除按钮
  70.                 td = document.createElement("td");
  71.                 var btnDel = document.createElement("button");
  72.                 btnDel.appendChild(document.createTextNode("删除"));
  73.                 td.appendChild(btnDel);
  74.                 tr.appendChild(td);
  75.             }
  76.         }
  77.         table.appendChild(tr);
  78.     }
  79.     document.getElementById(toid).appendChild(table);
  80. }
  81. 动态生成table

这是我定义的一个js方法，怎么调用也在开头有说明，必须传入json格式的数据，否则出错。

下面再给这个table定义一个样式，使它看起来好看一些。

  1.  
  2.  table样式
  1.  
  2. table
  3. {
  4.     padding: 0;
  5.     margin: 0;
  6.     border-collapse: collapse;
  7. }
  8. td
  9. {
  10.     border: 1px solid #009999;
  11.     padding: 6px 6px 6px 12px;
  12.     color: #4f6b72;
  13.     text-align: center;
  14. }
  15. td button
  16. {
  17.     font-size:12px;
  18. }
  19. table样式

好了，现在我们做一个demo测试一下它的效果，为了简单起见，我就不写服务器端返回json数据了，直接在浏览器端定义一个json格式的数据，也把js和css全写在html页面上（不推荐这种做法，这里只是为了简单起见）。

  1.  
  2.  动态生成table的demo
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.     <style type="text/css">
  7.         table
  8.         {
  9.             padding: 0;
  10.             margin: 0;
  11.             border-collapse: collapse;
  12.         }
  13.  
  14.         td
  15.         {
  16.             border: 1px solid #009999;
  17.             padding: 6px 6px 6px 12px;
  18.             color: #4f6b72;
  19.             text-align: center;
  20.         }
  21.  
  22.         td button
  23.         {
  24.             font-size: 12px;
  25.         }
  26.     </style>
  27.     <script type="text/javascript">
  28.         /*
  29.         createTable(toid, jsondata, check, edit, del)：用于动态创建table，第0行为表头，数据里必须包含表头和数据的id
  30.         @toid：创建table到id为toid的节点下
  31.         @jsondata：用于创建table的json格式的数据（须在jsondata里包含表头标题）
  32.         @check：是否创建查看按钮
  33.         @edit：是否创建编辑按钮
  34.         @del：是否创建删除按钮
  35.         */
  36.         function createTable(toid, jsondata, check, edit, del) {
  37.             var table = document.createElement("table");
  38.             var tr, td;
  39.             for (i in jsondata) {
  40.                 tr = document.createElement("tr");               //创建tr
  41.                 //________________创建表头________________________________________
  42.                 if (i == 0) {
  43.                     for (j in jsondata[i]) {                                      //根据数据在tr内创建td
  44.                         td = document.createElement("td");
  45.                         td.appendChild(document.createTextNode(jsondata[i][j]));
  46.                         if (j == "id") {                                                   //创建隐藏的td来存放id
  47.                             td.style.display = "none";
  48.                         }
  49.                         td.style.background = "#C1DAD7";              //设置表头颜色
  50.                         tr.appendChild(td);
  51.                     }
  52.                     if (check == true) {                                                 //创建查看按钮
  53.                         td = document.createElement("td");
  54.                         td.appendChild(document.createTextNode("查看"));
  55.                         td.style.background = "#C1DAD7";              //设置表头颜色
  56.                         tr.appendChild(td);
  57.                     }
  58.                     if (edit == true) {                                              //创建编辑按钮
  59.                         td = document.createElement("td");
  60.                         td.appendChild(document.createTextNode("编辑"));
  61.                         td.style.background = "#C1DAD7";          //设置表头颜色
  62.                         tr.appendChild(td);
  63.                     }
  64.                     if (del == true) {                                                 //创建删除按钮
  65.                         td = document.createElement("td");
  66.                         td.appendChild(document.createTextNode("删除"));
  67.                         td.style.background = "#C1DAD7";         //设置表头颜色
  68.                         tr.appendChild(td);
  69.                     }
  70.                 }
  71.                 //________________创建数据行________________________________________
  72.                 else {
  73.                     for (j in jsondata[i]) {                                      //根据数据在tr内创建td
  74.                         td = document.createElement("td");
  75.                         td.appendChild(document.createTextNode(jsondata[i][j]));
  76.                         if (j == "id") {                                              //创建隐藏的td来存放id
  77.                             td.style.display = "none";
  78.                         }
  79.                         tr.appendChild(td);
  80.                     }
  81.                     if (check == true) {                                          //创建查看按钮
  82.                         td = document.createElement("td");
  83.                         var btnCheck = document.createElement("button");
  84.                         btnCheck.appendChild(document.createTextNode("查看"));
  85.                         td.appendChild(btnCheck);
  86.                         tr.appendChild(td);
  87.                     }
  88.                     if (edit == true) {                            //创建编辑按钮
  89.                         td = document.createElement("td");
  90.                         var btnEdit = document.createElement("button");
  91.                         btnEdit.appendChild(document.createTextNode("编辑"));
  92.                         td.appendChild(btnEdit);
  93.                         tr.appendChild(td);
  94.                     }
  95.                     if (del == true) {                             //创建删除按钮
  96.                         td = document.createElement("td");
  97.                         var btnDel = document.createElement("button");
  98.                         btnDel.appendChild(document.createTextNode("删除"));
  99.                         td.appendChild(btnDel);
  100.                         tr.appendChild(td);
  101.                     }
  102.                 }
  103.                 table.appendChild(tr);
  104.             }
  105.             document.getElementById(toid).appendChild(table);
  106.         }
  107.     </script>
  108.     <script type="text/javascript">
  109.         var testData = eval("([{\"No\":\"序号\",\"name\":\"姓名\",\"gender\":\"性别\",\"age\":\"年龄\"},{\"No\":\"1\",\"name\":\"小五毛\",\"gender\":\"男\",\"age\":\"22\"},{\"No\":\"2\",\"name\":\"中五毛\",\"gender\":\"女\",\"age\":\"18\"},{\"No\":\"3\",\"name\":\"大五毛\",\"gender\":\"男\",\"age\":\"20\"}])");
  110.         window.onload = function () {
  111.             createTable("data", testData, true, true, true);
  112.         }
  113.     </script>
  114. </head>
  115. <body>
  116.     <div id="data">
  117.     </div>
  118. </body>
  119. </html>
  120. 动态生成table的demo

这里有一个要注意的地方，你可以选择使用jquery来解释json数据，使用jquery.parseJSON()对数据格式的要求比较高，必须符合json格式；如果使用原生js的话，必须使用eval()这个方法，eval()的速度非常快，但是他可以编译以及执行任何javaScript程序，所以会存在安全问题。在使用eval()时，来源必须是值得信赖的。需要使用更安全的json解析器。在服务器不严格的编码在json或者如果不严格验证的输入，就有可能提供无效的json或者载有危险的脚本，在eval()中执行脚本，释放恶意代码。

另外，亲测暂时不兼容ie7版本以下的浏览器，支持ie8以上以及chrome、firefox浏览器。有兴趣的看官可以修改一下，让它兼容ie7以下的浏览器。

小生初出茅庐，对世界充满太多好奇，自身能力也充满各种空缺，写得不好还望指出。如有好的修改建议，请告知一声，大家共同进步。

 
 
分类: jquery

初探原生js根据json数据动态创建table的更多相关文章

  1. js将json数据动态生成表格

    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...

  2. jsp页面根据json数据动态生成table

    根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

  3. mui 根据 json 数据动态创建列表

    使用 underscore.js 模块解析 Underscore提供了一个轻量级的模板解析函数,它可以帮助我们有效地组织页面结构和逻辑. 实例: <!DOCTYPE html> <h ...

  4. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  5. js格式化JSON数据

    前言: 最近做的项目中遇到个需要在前端页面中将某个设备需要的数据格式展示出来,方便用户配置.一开始单纯的将数据格式写入到pre标签中, 但是通过pre标签写入的数据格式在代码可视化上不是很优雅.由于上 ...

  6. js基础例子动态创建table实例

    <style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...

  7. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  9. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. NET MVC中使用FluentValidation

    ASP.NET MVC中使用FluentValidation验证实体   1.FluentValidation介绍 FluentValidation是与ASP.NET DataAnnotataion ...

  2. InstallShield集成安装MSDE2000最小版本(一) fishout特许授权发布

    原文:InstallShield集成安装MSDE2000最小版本(一) fishout特许授权发布 原帖地址:http://blog.csdn.net/fishout/archive/2009/10/ ...

  3. API接口开发简述示例

    作为最流行的服务端语言PHP(PHP: Hypertext Preprocessor),在开发API方面,是很简单且极具优势的.API(Application Programming Interfac ...

  4. Serv-U执行CMD命令

    site exec + 命令.比如关机: site exec shutdown -r -t 0 注意,网上很多教程在前面加了一个“quote”,实测根本无效,不知道那些教材是怎么回事. 执行方式有很多 ...

  5. Keil中使用Astyel进行C语言的格式化

    Astyel !E --style=linux --delete-empty-lines --indent=spaces=2 --break-blocks 这可以做到, 使用Linux风格的代码 ) ...

  6. jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

    今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.for ...

  7. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  8. OWIN产生的背景以及简单介绍

    OWIN产生的背景以及简单介绍 随着VS2013的发布,微软在Asp.Net中引入了很多新的特性,比如使用新的权限验证模块Identity, 使用Async来提高Web服务器的吞吐量和效率等.其中一个 ...

  9. QTP脚本不能录制怎么办？

    QTP是基于VBS脚本语言的,大部分VBS脚本都能在QTP上运行,只是在一些细节上略有不同,比如说VBS上停止用sleep,QTP上用wait.QTP的强大之处在于对程序窗口的操作,有很多针对窗体的属 ...

  10. MVC框架的插件与拦截器基础

    自制MVC框架的插件与拦截器基础 上篇谈到我自己写的MVC框架,接下来讲讲插件及拦截器! 在处理一些通用的逻辑最好把它封装一个插件或者拦截器,以便日后可以直接拿过来直接使用.在我的框架中可以通过继承以 ...