JS模拟数据入库及删除

最新推荐文章于 2021-11-19 19:09:27 发布

大名张无忌

最新推荐文章于 2021-11-19 19:09:27 发布

阅读量181

点赞数

分类专栏： JS 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_40029828/article/details/104889719

版权

JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

自己准备了三个数据入库的

<style>
    tr {
        width: 400px;
    }

    th {
        width: 80px;
        background-color: pink;
        margin: 10px;
    }

    td {
        width: 80px;
        background-color: pink;
        margin: 10px;
        text-align: center;
    }
</style>
<body>
<table>
    <thead>
    <th>name</th>
    <th>subject</th>
    <th>score</th>
    <th>other</th>
    </thead>
    <tbody></tbody>
</table>
<script>
    var list = [{
        name: '张三', subject: 'JS', score: '100'
    },
        {
            name: '李四', subject: 'JS', score: '90'
        },
        {
            name: '王五', subject: 'JS', score: '90'
        }
    ]
    var tab = document.querySelector('tbody');
    //创建行
    for (var i = 0; i < list.length; i++) {
        var tr = document.createElement('tr');
        tab.appendChild(tr);
        //行里面创建单元格
        for (var k in list[i]) {
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = list[i][k];
        }
        //特殊有删除文字的单元格
        var td = document.createElement('td');
        tr.appendChild(td);
        td.innerHTML = "<a href='javascript:;'>删除</a>";
    }
    //删除按钮
    var dels = document.querySelectorAll('a');
    for (k = 0; k < dels.length; k++) {
        dels[k].onclick = function () {
        //this如果变成dels[k]就会报错undefined，难以理解。。。
            tab.removeChild(this.parentNode.parentNode);
        }
    }
</script>
</body>