JavaScript实现动态写入表格

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

问题引入

如果我们在写程序的时候,接收到了后台传入的数据,怎么样用原生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>

运行图:
在这里插入图片描述

小结

方法有很多种,本次只是介绍其中一种,如果还有遇到类似问题会再写一个。

相关文章
|
6月前
|
JavaScript 前端开发
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
使用js生成表格标题、表格内容并且每行附带删除按钮然后插入到页面中
52 2
|
7月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
42 0
|
7月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
61 1
|
7月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
121 1
|
8月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
124 3
|
8月前
|
JavaScript
JS实现表格跨行变色
JS实现表格跨行变色
|
8月前
|
JavaScript
Vue.js中使用作用域插槽实现自定义表格组件
Vue.js中使用作用域插槽实现自定义表格组件
116 1
|
7月前
|
JavaScript 前端开发
前端 JS 经典:动态执行 JS
前端 JS 经典:动态执行 JS
79 0
|
8月前
|
前端开发 JavaScript 数据可视化
详尽分享表格的编辑插件editable.js
详尽分享表格的编辑插件editable.js
139 0
|
8月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......

热门文章

最新文章