html添加子节点全选全删单个删

最新推荐文章于 2021-11-18 23:31:50 发布

忙着写BUG

最新推荐文章于 2021-11-18 23:31:50 发布

阅读量436

点赞数

本文链接：https://blog.csdn.net/MincingMachine/article/details/78690971

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           *{
               margin: 0px auto;
               padding: 0px;
           }
           #top1{
               margin-top: 30px;
           }
           .tab{
               margin-top: 30px;
               width: 40%;
               height: 100px;
           }
           .tab2{
               margin-top: 30px;
               width: 40%;

           }
           .tab2 td{
               text-align: center;
               border: solid black 1px;
           }
       </style>
   </head>
   <body>
       <table class="tab">
           <tr>
               <td>用户名：</td>
               <td><input type="text" id="name" name="name" /></td>
               <td><span id="sname"></span></td>
           </tr>
           <tr>
               <td>密码：</td>
               <td><input type="text" id="pwd" name="pwd" /></td>
               <td><span id="spwd"></td>
           </tr>
           <tr align="center">
               <td colspan="3"><input type="button" value="提交" id="btn1" οnclick="add()" /></td>
           </tr>
       </table>
       <div id="top1" align="center">
       <input type="button" id="btn2" value="批量删除" οnclick="dele(0)" />
       <input type="button" id="btn3" value="全选" οnclick="quan()" />
       <input type="button" id="btn4" value="反选" οnclick="fan()" />
       </div>

       <table id="tab2" class="tab2" cellpadding="0px" cellspacing="0px">
           <tr>
               <td></td>
               <td>用户名</td>
               <td>密码</td>
               <td>操作</td>
           </tr>
       </table>


   </body>
   <script type="text/javascript">
       function add(){
           clearSpan();
           var flag=true;
           var names = document.getElementById("name").value;
           var pwds = document.getElementById("pwd").value;

           if(names==null || names.trim()==""){
               flag=false;
               document.getElementById("sname").innerHTML="<font color='red'>用户名不能为空</font>";
           }
           if(pwds==null || pwds.trim()=="" ||pwds.length<6){
               flag=false;
               document.getElementById("spwd").innerHTML="<font color='red'>密码长度大于6位且不为空</font>";
           }
           if(flag){

               var tr = document.createElement("tr");

               var td1 = document.createElement("td");


               td1.innerHTML="<input type='checkbox' name='chec' />";


               var td2 = document.createElement("td");

               td2.innerHTML=document.getElementById("name").value;

               var td3 = document.createElement("td");

               td3.innerHTML=document.getElementById("pwd").value;

               var td4 = document.createElement("td");

               td4.innerHTML="<a href='#' οnclick='del(this)'>操作</a>";

               tr.appendChild(td1);
               tr.appendChild(td2);
               tr.appendChild(td3);
               tr.appendChild(td4);
               document.getElementById("tab2").appendChild(tr);
           }
       }

       function del(aa){
           aa.parentNode.parentNode.remove();
       }

       function dele(cao){
           var p = cao;
           var chen = document.getElementsByName("chec");

           for (var i = 0; i < chen.length; i++) {

               if(chen[i].checked==true){

                   var tr = chen[i].parentNode.parentNode
                   tr.parentNode.removeChild(tr);
                   i=-1;
                   p++;
               }
           }
           if(p==0){
               alert("至少选中一行")
           }


       }

       function fan(){
           var chen = document.getElementsByName("chec");
           for (var i = 0; i < chen.length; i++) {
               chen[i].checked=!chen[i].checked
           }
       }

       function quan(){
           var chen = document.getElementsByName("chec");
           for (var i=0; i<chen.length;i++) {
               chen[i].checked=true;
           }
       }

       function clearSpan(){
                   var arr = document.getElementsByTagName("span");
                   for(var i = 0; i < arr.length; i++){
                       arr[i].innerHTML = "";
                   }
        }
   </script>
</html>