Javascript implements checkbox all selection and delete selected operations

When we browse the web, we often see the operations of selecting all and deleting all. The details are as follows, for your reference only.

Realize the idea of selecting all:

1. Create a table, set a button to select all in the header, and add a mouse click event to it

<input type="checkbox" id="chkstu" onclick="myfunc(this)">

2. Design the CSS style attributes of the table (width, height, center, border, special background color), in order to make the table more beautiful

table{
            margin: 0 auto;
            border-collapse: collapse;
            border:1px solid black;
     }
.special{
            background-color: #cdbbdb;
        }

3. Get elements by name getElementsByName

4. Use the for loop checkbox

5. Click the Select All button again to cancel the selection

Implement the idea of deleting the selected (whole row):

1. Add a button outside the table, give it a value attribute, and add a mouse click event to it

The <caption> element defines a table caption. The following code should be written in the caption tag to achieve the purpose of centering the table title

<input type="button" value="删除所选" onclick='delnode()' id="btndel">

2. Get elements by name getElementsByName

3. Use the for loop checkbox

4. Note: Delete selections must be deleted from bottom to top, because if deleted from top to bottom, the loop condition will change

5. If judges whether it is selected, if it is selected, take out the parent node of its parent node, which is tr, and then take out the parent node of tr, which is tbody, and use the removeChild() method to specify a specified child node of the element , take out the child node tr of tbody and remove it

if(mychk.checked==true){
                    mytr=mychk.parentNode.parentNode;
                    pnode=mytr.parentNode;
                    pnode.removeChild(mytr);
                }

The total code is as follows:

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	    <style type="text/css">
        table{
            margin: 0 auto;
            border-collapse: collapse;
            border:1px solid black;
        }
        .special{
            background-color: #cdbbdb;
        }
        </style>
        <script type="text/javascript">
        //单项选择
        window.onload=function(){
            //拿出a标签
            var dellist=document.getElementsByTagName('a');
            for(var i=0;i<dellist.length;i++){
                var mydel=dellist[i];
                mydel.onclick=function(){
                    //confirm弹出判断是否要删除
                    if(confirm('你确认要删除吗?')){
                    childnode=this.parentNode.parentNode;
                    pnode=childnode.parentNode;
                    pnode.removeChild(childnode);
                    }
                }
            }
        }
        //全选与非全选
        function myfunc(chk){
             var chklist=document.getElementsByName('chkstu');

             for(var i=0;i<chklist.length;i++){
             	 chklist[i].checked=chk.checked;
             }
         }
         //删除所选
        function delnode(){
            var chklist=document.getElementsByName('chkstu');
            for(var i=chklist.length-1;i>=0;i--){
                var mychk=chklist[i];
                if(mychk.checked==true){
                    mytr=mychk.parentNode.parentNode;
                    pnode=mytr.parentNode;
                    pnode.removeChild(mytr);
                }
            }
        }
	    </script>
	<body>
		<form action="">
        <table border="1" width="400">
        <caption>
        
        <input type="button" value="删除所选" onclick='delnode()' id="btndel"></caption>
        
        	<tr>
        		<td width="60"><input type="checkbox" id="chkstu" onclick="myfunc(this)">全选</td>
        		<td>姓名</td>
        		<td>性别</td>
        		<td>年龄</td>
                <td>操作</td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>李四</td>
        		<td>男</td>
        		<td>19</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr>
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>王五</td>
        		<td>男</td>
        		<td>22</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>赵六</td>
        		<td>女</td>
        		<td>14</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr>
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>唐七</td>
        		<td>男</td>
        		<td>25</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>韩八</td>
        		<td>男</td>
        		<td>11</td>
                <td><a href="#">删除</a></td>
        	</tr>
        </table>
		</form>

	</body>
	</html>

Javascript implements checkbox all selection and delete selected operations

Guess you like