JavaScript练习小案例-----动态渲染表格

最新推荐文章于 2023-07-18 14:09:41 发布

小不言啊

最新推荐文章于 2023-07-18 14:09:41 发布

阅读量515

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_61656944/article/details/122803187

版权

本文通过一个JavaScript小案例详细讲解如何动态渲染表格，重点介绍了在前端开发中结合Vue.js实现数据驱动视图的方法，帮助读者掌握动态生成表格的核心技巧。

摘要由CSDN通过智能技术生成


    <style>
        table{
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>


    <script>
        // 提前准备好的数据
        var users = [
            {id:1, name: "前端小不言", age: 18},
            {id:2, name: "天上天下", age: 19},
            {id:3, name: "有我无敌", age: 20}
        ];



        // 获取到 tbody 标签
        var tbody = document.querySelector("tbody");

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

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

            // 每一个对象生成一个tr标签