15621857753

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

来源:齐鲁建站 栏目:Html5 阅读: 日期:2023-08-21

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

先来看效果图:

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>

展开