JavaScript实现动态写入表格

程序员大腾

已于 2022-11-10 19:33:45 修改

阅读量2.1k

点赞数 3

分类专栏： HTML/CSS/JavaScript 文章标签： javascript 前端开发语言

于 2022-07-25 23:30:05 首次发布

本文链接：https://blog.csdn.net/weixin_45909221/article/details/125985419

版权

HTML/CSS/JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

问题引入

如果我们在写程序的时候，接收到了后台传入的数据，怎么样用原生JavaScript把数据写入表格呢？
如果第二次传来的数据与第一次不一样的话该怎么办呢？

问题解决

我们可以将传过来的数据遍历，然后拼接字符串。
然后可以使用document.querySelector(“.id”).innerHTML = 字符串；的形式，将字符串写入表格。
代码实现（因为现在没办法模拟后台传数据，现在以字符串模拟数据）：
1.初始工作：写一个表格，将tbody设置一个标识，以便下面我们可以获取到。

<table border="1">
        <thead>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>sex</td>
                <td>age</td>
                <td>email</td>
            </tr>
        </thead>
        <tbody class="tbody">

        </tbody>

    </table>

在这里插入图片描述

2.完整代码

<!DOCTYPE html>
<html>

<head>
    <title>小腾</title>
    <meta charset="utf-8">
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>sex</td>
                <td>age</td>
                <td>email</td>
            </tr>
        </thead>
        <tbody class="tbody">

        </tbody>

    </table>

    <script>

        /**
         * 模拟数据
         */
        var str = [{
            "age": 21,
            "email": "小岳@163.com",
            "id": 1,
            "name": "小岳",
            "sex": "男"
        }, {
            "age": 18,
            "email": "xiaowang@163.com",
            "id": 2,
            "name": "小王",
            "sex": "女"
        }, {
            "age": 20,
            "email": "xiaolu@qq.com",
            "id": 3,
            "name": "小路",
            "sex": "男"
        }, {
            "age": 21,
            "email": "xiaoteng@gmail.com",
            "id": 4,
            "name": "小腾",
            "sex": "男"
        }];

        var html = "";
        for (var i = 0; i < str.length; i++) {
            //拼接字符串，把所有的值都拼接上
            html += "<tr>" + "<td>" + str[i].id + "</td>" + "<td>" + str[i].name + "</td>" + "<td>" + str[i].sex +
                "</td>" + "<td>" + str[i].age + "</td>" + "<td>" + str[i].email + "</td>" + "</tr>"

        }
		//将数据写入刚才的表格中
        document.querySelector(".tbody").innerHTML = html;
    </script>

</body>

</html>