JavaScript 创建动态表格

JavaScript 创建动态表格

　　版权声明：未经授权，严禁转载！　　

案例代码

<div id="data"></div>

<script>
    var json = [
        {"ename": "王佳伟", "salary": 11000, "age": 18},//json[0]["ename"]
        {"ename": "张三", "salary": 13000, "age": 21},//1
        {"ename": "李四", "salary": 12000, "age": 36}//2
    ];

    var data = document.getElementById("data");
    // 创建一个 table
    var table = document.createElement("table");
    data.appendChild(table);
    // 创建 thead
    var thead  =document.createElement("thead");
    // 将thead 添加到 table
    table.appendChild(thead);
    // 创建 tr
    var tr = document.createElement("tr");
    thead.appendChild(tr);
    // 创建 th
    for(key in json[0]){
        var th = document.createElement("th");
        th.innerHTML = key;
        thead.appendChild(th);
    }

    //创建tbody
    var tbody=document.createElement("tbody");
    //将tbody添加到table中
    table.appendChild(tbody);
    //遍历数组
    for(var i=0;i<json.length;i++){
        //创建tr
        var tr=document.createElement("tr");
        //将tr添加到tbody
        tbody.appendChild(tr);
        //遍历数组中的某一个元素（关联数组）
        for(key in json[i]){
            //创建td
            var td=document.createElement("td");
            //将td添加到tr
            tr.appendChild(td);
            td.innerHTML=json[i][key]
        }
    }

    //将table添加到id为data的div下
    data.appendChild(table);
    

</script>

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！

【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！

​

【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​