# 小白也能看懂JS添加，全选，所选删除

最新推荐文章于 2022-07-12 12:33:00 发布

Plato Copy Studio（欢迎骚扰）

最新推荐文章于 2022-07-12 12:33:00 发布

阅读量174

点赞数 3

分类专栏：小白成长记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_49604266/article/details/109436098

版权

小白成长记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

小白也能看懂JS添加，全选，所选删除

通过javascript对表格进行按钮添加，全选/不全选，所选删除操作。超详细解答，小白一眼就懂
在这里插入图片描述
先看一下我的代码，在js代码里我会详细讲解每一行，结尾会总体讲解js的思路

<style>
        #box{
            text-align: center;
        }
        #del{
            position: absolute;
            right: 600px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>姓名:<input type="text" /></p>
        <p>年龄:<input type="text" /></p>
        <p>性别：<input type="radio" name="ral" id="man" value="男">男
                 <input type="radio" name="ral" id="woman" value="女">女    
        </p>
        <p><button>添加数据</button></p>
    </div>
    <table width="500" border="1" align="center" id="tab">
        <thead>
            <tr>
                <td><input type="checkbox" name="" id="allchk" >全选</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="" id="" class="opon"></td>
                <td>张三</td>
                <td>11</td>
                <td>男</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" class="opon"></td>
                <td>李四</td>
                <td>15</td>
                <td>女</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id="" class="opon" ></td>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <button id="del">删除所选</button>

<script>
        var inp1 = document.getElementById('box').getElementsByTagName('input')[0]//var出性名输入框
        var inp2 = document.getElementById('box').getElementsByTagName('input')[1]//var出年龄输入框
        var btn1 =document.getElementById('box').getElementsByTagName('button')[0]//var出第一个按钮（添加按钮）
        var tBody=document.getElementById('tab').getElementsByTagName('tbody')[0]//var出表格
        var man1=document.getElementById('man')//var出男单选框
        var woman1=document.getElementById('woman')//var出女单选框
        btn1.onclick=function (){//‘添加按钮’点击事件
            var inp1_value=inp1.value//个人习惯可以省略此行
            var inp2_value=inp2.value
            var tr1=document.createElement('tr')//创建新代码，因为是从无到有所以要用createElement        
            var td1=document.createElement('td')
           	var td2=document.createElement('td')
            td2.innerHTML=inp1_value//输入框和表格内容内容对接
            var td3=document.createElement('td')
            td3.innerHTML=inp2_value
            var td4=document.createElement('td')
            td1.innerHTML="<input type='checkbox' name='' id='' class='opon'>"

            if(man1.checked){//布尔值来判断男女，如果男被选中就是true，没被选中就是false会执行else里的代码
                td4.innerHTML=man1.value
            }else{
                td4.innerHTML=woman1.value
            }

            tr1.appendChild(td1)//进行内容添加
            tr1.appendChild(td2)
            tr1.appendChild(td3)
            tr1.appendChild(td4)
            tBody.appendChild(tr1)
    
        }
        var allchk=document.getElementById('allchk')//var 出全选的复选框
        var opo=document.getElementsByClassName('opon')//var 出列表里的复选框
        //全选
        allchk.onclick=function(){//全选框点击事件
            for(var i=0;i<opo.length;i++){//为了把所有的按钮拿出来要用到循环
                if(allchk.checked==true){//还是要用到if语句，（当全选框被点击之后为true）
                    opo[i].checked=true//其他复选框也会被变成true，变成打勾
                }else{
                    opo[i].checked=false//取消全选
                }
            }              
        }
        //删除
        var del=document.getElementById('del')//var出删除键
        del.onclick=function(){//删除的点击事件
            for(var i=0;i<opo.length;i++){//将所有的复选框拿出来，要用到for循环
                if(opo[i].checked){//如果复选框是被选中的，执行删除，搭配全选功能使用，可以实现单删多删
                    opo[i].parentNode.parentNode.remove();//删掉复选框的父节点的父节点td
                    i--;//全篇网页的精华所在
                }
            }
        }
    </script>

i–最精华的一行代码，非常通俗简单的讲。如果没有他你会发现删除功能是有很大的bug的，当你全选删除后并不是全删而是有规则的留下了一些信息的。我喜欢把这个bug叫做删除造成的下标错乱。
个人用比较通俗简明的说一下原理。当你删除了一条内容时候，下标并没有被删掉，后面的内容直接顶上。
举例：表格有三条tr下标分别为 0，1，2，；在不加i–的情况下删除下标1的内容时，1的内容虽然没了但下标还在。2的下标和内容直接顶到了1的位置，此时1的内容已经没了，下标却在。就会发生一个内容有两个下标的情况，发生错乱。当加上i–时候就可以完美解决，在删除内容时候，下标一起删除。下一条内容自动顶上，下标改变成新下标。1被删除时候，2顶上变成1的下标还是2的内容。

整体思路很简单，都是点击事件里加for循环里面在加if判断语句，还有一些新建的语句内容是用createElement，按照这个思路写，慢慢就会了。

这是我第一次发文章，为什么网上有很多此类文章还要有我这一篇呢？再我写这个功能前也会去网上查阅资料。但我想到了一个问题，网上其他文章极其难懂用到很多相对于这个功能更高端的技术，我就想问问那些作者，能懂你那些技术还不懂这个功能，为什么不能用和这个功能相等的技术写出这篇文章？我相信搜索这个功能的都是学者，自学者，教育机构的准程序员。不想你们因为看不懂文章得不到更有用的指导而丧失兴趣。

希望各位永远能保持着对新功能的神奇“哇”出来的求知欲。
而不是看到新功能就先想到好难实现。