JavaScript中table表格的删除例子

Submerge~

于 2020-03-29 21:12:06 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/MixedSignals/article/details/105186377

版权

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }

        table td{
            width: 100px;
            line-height: 30px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>城市</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>


    <script>
        // 建立数组,模拟数据库的数据
        var arr = [
            {name:'张三',age:18,sex:'男',city:'北京'},
            {name:'李四',age:19,sex:'女',city:'上海'},
            {name:'王五',age:20,sex:'男',city:'广州'},
            {name:'赵六',age:21,sex:'女',city:'重庆'},
            {name:'刘七',age:22,sex:'保密',city:'天津'},
        ];

        var oTb = document.querySelector('tbody');
        var oBtn = document.querySelector('[name="add"]');
        setTab();

        function setTab(){
            var str = '';
            arr.forEach(function(item , key){
                str += '<tr>';
                str += `<td>${key+1}</td>`;
                for(var k in item){
                    str += `<td>${item[k]}</td>`;
                }
                str += `<td> <button index="${key}">删除</button> </td>`
                str += '</tr>';
            });
            oTb.innerHTML = str;
            del();
        }

        function del(){
            var oBtns = document.querySelectorAll('tbody button');
            oBtns.forEach(function(item){
                item.onclick = function(){
                    var index = item.getAttribute('index');
                    arr.splice(index , 1);
                    setTab();
                }
            })
        }

    </script>
</body>
</html>

在这里插入图片描述

Submerge~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中table表格的删除例子

DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit...
复制链接

扫一扫