js之创建表格及删除行

2021-03-17 21:03:28 阅读：163 来源： 互联网

标签：appendChild 创建表格删除 tr js createElement var table document

<!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>

标签：appendChild,创建表格,删除,tr,js,createElement,var,table,document
来源： https://www.cnblogs.com/ella-li/p/14551883.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js之创建表格及删除行