JS动态生成表格 

<style>
        .box {
            display: flex;
            justify-content: center;
        }
        
        table {
            width: 600px;
            text-align: center;
            border-collapse: collapse;
            border: 1px solid #000;
        }
        
        table thead {
            background-color: #ccc;
        }
        
        table tr td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="box">
        <table>
            <thead>
                <tr>
                    <td colspan="4"><strong>成绩表</strong></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

</body>
<script>
    var tb = document.querySelector('tbody');
    // 动态生成表格，可以自己生成几个对象来模拟数据库
    function Results(uName, course, result) {
        this.uName = uName;
        this.course = course;
        this.result = result;
    }
    var xy = new Results('小雨', '数学', 99);
    var xh = new Results('小红', '语文', 88);
    var xm = new Results('小明', '英文', 89);
    var xl = new Results('小林', '物理', 77);
    var xm = new Results('小马', '化学', 98);
    var xw = new Results('小王', '数学', 69);
    // 使用数组把数据存进去
    var obj = [xy, xh, xm, xl, xm, xw];
    // 创建tr标签把数据显示出来
    for (var i = 0; i < obj.length; i++) {
        var tr = document.createElement('tr');
        tb.appendChild(tr);
        var td1 = document.createElement('td');
        td1.innerHTML = obj[i].uName;
        var td2 = td1.cloneNode(true);
        td2.innerHTML = obj[i].course;
        var td3 = td1.cloneNode(true);
        td3.innerHTML = obj[i].result;
        var td4 = td1.cloneNode(true);
        td4.innerHTML = '<a href="javascript::">删除</a>';
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
    }
    var as = tb.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
            tb.removeChild(this.parentNode.parentNode);
        }
    }
</script>

 

posted @ 2021-06-22 10:48  唯爱小喵  阅读(122)  评论(0)    收藏  举报