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>