js动态生成数据列表

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动态生成数据列表相关的知识，希望对你有一定的参考价值。

我们通常会使用table标签来展示数据内容，由于需要展示的数据内容是随时更换的，所以不可能将展示的数据列表写死在html写死在页面中，而是需要我们根据后台传来的数据随时更换，这个时候就需要我们使用js来动态生成表格。

首先我们需要先写好页面的样式。

html部分

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js动态生成数据列表</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #tb {
            width: 500px;
            border: 1px solid #000;
            border-collapse: collapse;
        }

            #tb td, #tb th {
                border: 1px solid #000;
            }

            #tb thead tr {
                height: 50px;
                background-color: lightgray;
            }

            #tb tbody tr {
                text-align: center;
                height: 30px;
            }

            #tb a {
                text-decoration: none;
            }

                #tb a:hover {
                    color: hotpink;
                }
    </style>
    <meta charset="utf-8" />
</head>
<body>
</body>
</html>

这个时候我们可以通过ajax向服务端发送请求，获取要展示的数据，由于主要目的是使用js动态展示列表，所本我们就假设已经获取到后台的数据。

js部分

    var headers = ["姓名", "学科", "成绩", "删除"];
    var datas = [
        { "name": "马闯", "subject": "语文", "score": 90 },
        { "name": "马户", "subject": "数学", "score": 100 },
        { "name": "马伦", "subject": "体育", "score": 9 },
        { "name": "马尧", "subject": "音乐", "score": 100 },
        { "name": "马震", "subject": "语文", "score": 90 },
        { "name": "马云", "subject": "语文", "score": 90 }
    ];

    creatTable(document.body, headers, datas);

    //将动态生成列表的部分封装成函数，可以重复调用，也方便统一修改
    function creatTable(parent, headers, datas) {

    var table = document.createElement("table");
    table.id = "tb";
    parent.appendChild(table);

    var thead = document.createElement("thead");
    table.appendChild(thead);

    var tr = document.createElement("tr");
    thead.appendChild(tr);

    for (var i = 0; i < headers.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = headers[i];
        tr.appendChild(th);
    }

    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);

        for (var k in datas[i]) {
            var td = document.createElement("td");
            td.innerHTML = datas[i][k];
            tr.appendChild(td);
        }
        var td = document.createElement("td");
        td.innerHTML = "<a href=‘javascript:‘>删除</a>";
        tr.appendChild(td);

        td.children[0].onclick = function () {
            var lines = tbody.children.length;
            if (lines <= 1) {
                alert("最后一条！请留一点数据吧！");
                return;
            }
            var tip = confirm("确认删除？");
            if (tip) {
                tbody.removeChild(this.parentNode.parentNode);
            }

        }
    }
}

以上是关于js动态生成数据列表的主要内容，如果未能解决你的问题，请参考以下文章

在js中怎么给动态生成的元素绑定事件

video.js 使用数据库中的 json 创建动态播放列表