JavaScript 动态生成表格 及删除表格

 

创建  表格表头

<body>

        <table>

                <thead>

                        <tr>

                        <td>序号</td>

                        <td>姓名</td>

                        <td>性别</td>

                        <td>年龄</td>

                        <td>地址</td>

                        <td>删除</td>

                        </tr>

                </thead>

                <tbody></tbody>

        </table>

<script>

// 定义数组模拟后端返回的数据

        var arr = [

                { id: 1, name: '张三', age: 18, sex: '男', addr: '北京' },

                { id: 2, name: '李四', age: 19, sex: '女', addr: '上海' },

                { id: 3, name: 'jack', age: 20, sex: '男', addr: '广州' },

                { id: 4, name: '王五', age: 21, sex: '女', addr: '重庆' },

                { id: 5, name: 'lucy', age: 22, sex: '保密', addr: '天津' },

        ];

                                // 调用下边的函数动态生成页面

        fun();

                          // 动态生成页面用函数包起来, 起个名字, 方便调用 ,以及删除后再次调用渲染页面

        function fun(){

                                // 先创建个空的 ,装想要写入的标签及内容

        var str =``;

                                // 循环生成, 数组的索引下标 (0---数组.length-1)

        for(var i = 0 ; i <= arr.length-1;i++){

          // 动态写入: 标签 + ${ 数组[对应的索引下标] . 对应的属性(有几种下边写几个)}解析出属性值

        str +=`

                <tr>

                        <td>${arr[i].id}</td>

                        <td>${arr[i].name}</td>

                        <td>${arr[i].age}</td>

                        <td>${arr[i].sex}</td>

                        <td>${arr[i].addr}</td>

                        <td><button>删除</button></td>

                </tr>

`;

}

                                        // 获取 tbody 标签

var oTbody = document.querySelector('tbody');

                                        // 给 tbody 标签 写入 动态生成的东西

oTbody.innerHTML = str;

                                        // 获取 生成的 button (注:必须先生成 再获取)

var oBtons = document.querySelectorAll('button')

                                     // forEach 循环所有的 button ( 参数1存:button 参数2存:button的索引下标 )

oBtons.forEach(function(item , key){

                                                // 添加事件 点击 参数1存的:button

                item.addEventListener('click',function(){

                                                // 弹出 确认框 询问?

                        if(window.confirm(`您确定要删除吗?`)){

                                                // 删除 ,数组 对应索引下标的单元(也是button的所以下标)    删除1个

                                        arr.splice(key,1)

                                                                // 再次渲染生成页面

                                                fun();

                        }

                })

})

}

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值