js 新手自学 没有数据库 通过localStorage模拟数据库 多选框的批量删除

8739714818@TOC

欢迎使用Markdown编辑器

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


js 新手自学 没有数据库 通过localStorage模拟数据库 多选框的批量删除


前言

师弟问又查找了 很多 都没有 全都是数据库的批量删除 所以自己写啦 一个 有BUG 欢迎大家检验。


<font color=#999AAA

一、为啥不使用数据库?

都说了是给新手的

二、2个代码

1.html代码

代码如下(示例):

<button onclick="add()">添加</button>
<button onclick="delAl()">批量删除</button>
<table cellspacing=0>
            <thead>
                <tr>
                    <th><input type="checkbox"  onclick="checkAll(this)">全选</th>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>

2.js 代码

代码如下(示例):仅批量删除代码

function delAl(){	
	var inpr = document.querySelectorAll('input[type="checkbox"]')//获取全选的集合
    var newarr = [] //设置一个空数组用来承载要删除的id
    for (var i=0 ; i<inpr.length; i++){ //循环全选的长度
        if (inpr[i].checked == true) { //设置条件为选中状态时
            newarr.push(arr[i-1].id) //曾想过在这删除 但是i会与上一次循环的i相加造成错误
            //应为i为长度 所以对照arr数组应-1 得下标并储存在新数组中
    }
    }
    for (var j = 0; j < newarr.length; j++) {//循环新数组
        for (var i = 0; i < arr.length; i++) {//循环arr
            if (newarr[j] == arr[i].id) {//让新数组中的id 与arr中的每一项的id进行对比
                arr.splice(i,1) //如果成功就删除该下标的本身数据
            }
        }   
    }
    localStorage.arr = JSON.stringify(arr)
    show(arr)
}

以上就是我自己写的 没有数据库的情况下的批量删除


总结

随然有BUG 但是没有数据库 越写越别扭 但是至少有2个bug

问题描述:

问题1. 在第6行时 无法直接删除 虽然出来的是长度但是 用splice删除时会与之前的删除的长度相加 删除其他的数据 问题2 . 由于自己手痒 又写了个全选 当你在表格第一行 即tr th 行中点击全选时会全部选中 但会报错 报错原因是tr th是表单头 不在数组中并且也没有id 有大佬帮忙看看 毕竟这种已将很长时间都没写过了 这样也常不多了
function delAl(){

    var inpr = document.querySelectorAll('input[type="checkbox"]')//获取全选的集合
    var newarr = [] //设置一个空数组用来承载要删除的id
    for (var i=0 ; i<inpr.length; i++){ //循环全选的长度
        if (inpr[i].checked == true) { //设置条件为选中状态时
            newarr.push(arr[i-1].id) //曾想过在这删除 但是i会与上一次循环的i相加造成错误
            //应为i为长度 所以对照arr数组应-1 得下标并储存在新数组中
    }
    }
    for (var j = 0; j < newarr.length; j++) {//循环新数组
        for (var i = 0; i < arr.length; i++) {//循环arr
            if (newarr[j] == arr[i].id) {//让新数组中的id 与arr中的每一项的id进行对比
                arr.splice(i,1) //如果成功就删除该下标的本身数据
            }
        }   
    }
    localStorage.arr = JSON.stringify(arr)
    show(arr)
}

原因分析:

项目急 没时间去思考 等项目搞定 师弟 我再回来解决这个BUG 反正不耽搁你用


解决方案:

这个月结束前 给你修BUG

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

魔主无双

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值