在JavaScript中用json对象创建一个table表格—

背景

为了练习和使用js中的创建节点、追加节点以及练习生成json对象和遍历集合。对现阶段学习到的js中的DOM文档对象模型进行阶段总结并进行实践练习。

使用json对象的形式创建table表格

我们先来想一想如何进行实现，实现的步骤有哪几步。

首先我们需要生成一个table，并将这个元素节点追加到body中。
声明json个格式的字符串，申明json对象
根据json对象的长度进行循环，每一次循环都生成一个tr，并将tr追加到table中去。
对json对象中的元素进行遍历，并生成td将元素赋值到td中，最后将td追加到tr中。

代码进行实现

<!DOCTYPE html>
<html> 
  <head>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
      // json格式的字符串
      var str = '[{name:"David",sex:"男",age:19},{name:"Jones",sex:"女",age:29},{name:"Rebecca",sex:"女",age:39}]';
      onload = function() {
        
        // 生成一个table，然后追加到body中
        // 里面遍历json对象生成里面的tr
        // 每一个json对象中的每一个成员(for-in)得到td标签
        // 1、生成table
        var table = document.createElement("table");
        //设置边框
        table.border = "1";
        // 2、得到json格式的对象
        var jsons = new Function("return " + str)();
        // 3、循环这个数组
        for(var i = 0; i < jsons.length; i++) {
          // 4、生成每一个行
          // 创建tr标签
          var tr = document.createElement("tr");
          // 5、添加td，就需要遍历每一个对象中的成员
          for(var k in jsons[i]) {
            // 6、创建td
            var td = document.createElement("td");
            td.appendChild(document.createTextNode(jsons[i][k]));
            // 7、追加td
            tr.appendChild(td);
          }
          // 循环结束，就得到一个行
          // 将行追加到table
          table.appendChild(tr);
        }
        // 将table加到body中
        document.getElementsByTagName("body")[0].appendChild(table);
      };
    </script>
  </head>
  <body>
  </body>
</html>

实现效果图

涉及到的知识点

DOM树中的添加节点，追加节点

创建节点
1.元素节点：var node=document.createElement(“标签名”);

2.文本节点：var textNode=document.createTextNode(“文本”);
<节点>.innerHTML=“文本”；//这里可以使用HTML
<节点>.innerText=“文本”；//非标准，浏览器兼容问题（不建议使用）

3.属性节点
<节点>.setAttribute(…,…);
//标准方法，符合xml规范，可以添加任意的属性

追加节点
1.追加到尾部：
父节点.appendChild(子节点);

2.插入到中间（插入到某一个元素的前面）
父节点.insertBefore(新元素，就元素);

声明json格式，创建json对象

声明json格式的字符串

// json格式的字符串
      var str = '[{name:"David",sex:"男",age:19},{name:"Jones",sex:"女",age:29},{name:"Rebecca",sex:"女",age:39}]';

创建Jason格式的对象

var jsons = new Function("return " + str)();

在JavaScript中用json对象创建一个table表格——实战练习

背景