js之创建表格及删除行 - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box table thead {
            background-color: lightgray;
        }
        #box table {
            border-collapse: collapse;
            text-align: center;
            border: 1px solid black;
            width: 300px;
        }
        #box table tr,
        #box table th {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    // 表数据
    datas = [{name: 'zs', sub: '语文', score: 100},
        {name: 'ls', sub: '数学', score: 90},
        {name: 'ww', sub: '语文', score: 100}
    ];
    // 表头数据
    var dataHeads = ['姓名', '科目', '成绩', '操作'];

    var box = document.getElementById('box');
    // 1，创建table元素
    var table = document.createElement('table');
    box.appendChild(table);

    // 2，创建表头
    var thead = document.createElement('thead');
    table.appendChild(thead);

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

    // 创建表头内容
    for (var i=0; i < dataHeads.length; i++) {
        var th = document.createElement('th');
        tr.appendChild(th);
        th.innerText = dataHeads[i];
    }
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    // 创建表格
    for (var i=0; i < datas.length; i++) {
        data = datas[i];
        tr = document.createElement('tr');
        tbody.appendChild(tr);

        for (var key in data) {
            th = document.createElement('th');
            tr.appendChild(th);
            th.innerText = data[key];
        }
        td = document.createElement('td');
        tr.appendChild(td);
        var link = document.createElement('a');
        td.appendChild(link);
        // 移除超链接的跳转
        link.href = 'javascript:void(0)';
        link.innerText = '删除';
        // 删除超链接 注册事件
        link.onclick = linkDelete;

        function linkDelete() {
            // 获取父节点
            var tr = this.parentNode.parentNode;
            tbody.removeChild(tr);
            // 取消a的超链接
            return false;
        }
    }
</script>
</body>
</html>
posted on 2021-03-17 20:55 ellaha 阅读(106) 评论(0) 收藏举报
刷新页面返回顶部