zoukankan      html  css  js  c++  java
  • 动态创建数据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>
  • 相关阅读:
    面向对象编程-介绍(python3入门)
    课堂作业03
    软件工程个人作业04
    团队介绍
    学习进度条
    课堂作业02
    学习进度条
    软件工程个人作业03
    课堂作业01
    软件工程个人作业02
  • 原文地址:https://www.cnblogs.com/tuziling/p/10111241.html
Copyright © 2011-2022 走看看