如何只使用DOM进阶添加一个简单的表格进网页?_document.body能不能把一个完整的表格放到页面上-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43748930/article/details/86089977

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .table * {
            border: 1px solid black;
            padding: 10px 20px;
        }
    </style>
  </head>

  <body>

     <script >
var stus = [
    {
        name: "王林",
        sex: "男",
        age: 18
    },
    {
        name: "孙雷",
        sex: "男",
        age: 19
    },
    {
        name: "王丽",
        sex: "女",
        age: 28
    },
    {
        name: "马冬梅",
        sex: "女",
        age: 18
    }
];
// 获取body标签
var myBody = document.querySelector("body");
// 创建table标签
var myTable = document.createElement("table");
// 将table表格添加到网页中去
myBody.appendChild(myTable);
//生成表头数据
var myThead = document.createElement("thead");
myTable.appendChild(myThead);
var myTr = document.createElement("tr");
myThead.appendChild(myTr);
//使用for循环生成表头的内容
var ar = ["name", "sex", "age"];
for (let i = 0; i < ar.length; i++) {
    var myTh = document.createElement("th");
    var myThText = document.createTextNode(ar[i]);
    myTh.appendChild(myThText)
    myTr.appendChild(myTh);
}
//生成表体数据
var myTbody = document.createElement("tbody");
myTable.appendChild(myTbody);
//使用for循环生成表体的内容
for (let i = 0; i < stus.length; i++) {
    let myTr = document.createElement("tr");
    for (let j = 0; j < ar.length; j++) {
        let myTd = document.createElement("td");
        let type = ar[j]
        myTd.appendChild(document.createTextNode(stus[i][type]));
        myTr.appendChild(myTd);
    }
    myTbody.appendChild(myTr);
}

// //创建属性节点并给其赋值
 var myClass = document.createAttribute("class");
   myClass.value = "table";
    myTable.setAttributeNode(myClass); 

   </script>

</body>