JS实例1：动态渲染数据之table

本文介绍了JS实例1：动态渲染数据之table，分为两个部分直接给出了，一是DIV部分，二是JS部分，一起来看看怎么写吧。。。

先来看效果图：

一、DIV部分

<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>NAME</td>
            <td>AGE</td>
        </tr>
    </thead>
    <tbody>
     js渲染数据的部分
    </tbody>
</table>

二、JS部分

<script>

    //定义数组
    var users = [
        { id: 1, name: '小明', age: 18 },
        { id: 2, name: '小花', age: 28 },
        { id: 3, name: '小兰', age: 66 }
    ]

    //获取到TBODY标签
    var tbody = document.querySelector('tbody')

    //循环遍历USERS数据
    users.forEach(function (item) {

        //这里的ITEM就是数组中的每一个对象
        console.log(item);

        //每一个对象生成一个TR标签
        var tr = document.createElement('tr')

        //循环遍历ITEM
        for (var key in item) {

            //生成TD标签
            var td = document.createElement('td')
            td.innerHTML = item[key]

            //把TD插入到TR标签内部
            tr.appendChild(td)

        }

        //把本次的TR插入到TBODY的内部
        tbody.appendChild(tr)
    })

</script>