欢迎阅读『Tag标签列表』

动态创建数据table 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box table {
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        //先进行模拟一个数据
        var json = [{
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
            {
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
            {
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
            {
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
            {
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
            {
                naem: 'zw',
                age: 19,
                sex: "男",
                subject: '语文',
                scre: 90
            },
        ];
        var headData = ["姓名", "年龄", "性别", "科目", "分数", "操作"];
        var box = document.querySelector("#box");
        var table = document.createElement("table");
        box.appendChild(table);
        table.style.backgroundColor = "pink";
        table.style.width = "600px";
        table.border = "1px";
        var thead = document.createElement("thead");
        table.appendChild(thead);
        var tr = document.createElement("tr");
        thead.appendChild(tr);
        for (var i = 0; i < headData.length; i++) {
            var th = document.createElement("th");
            th.innerText = headData[i];
            tr.appendChild(th);
        }
        var tbody = document.createElement("tbody");
        table.appendChild(tbody);
        for (var j = 0; j < json.length; j++) {
            var tr = document.createElement("tr");
            tbody.appendChild(tr);
            for(var key in json[j]){
                var td=document.createElement("td");
                td.innerText=json[j][key];
                tr.appendChild(td)   
            }
            var a=document.createElement('a');
            var td=document.createElement("td");
            a.href="javascript:;"
            a.innerText="删除";
            tr.appendChild(td);
            td.appendChild(a);
            a.onclick=function(e){
               // tbody.removeChild(e.target.parentNode.parentNode);
               setTimeout(function () {
                   e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);
                 },2000)
            }

        }
    </script>
</body>

</html>

 

posted @ 2018-12-12 21:50  兔子零-A酱  阅读(222)  评论(0)  编辑  收藏  举报