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

<!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" onclick="add()" /></td>
            </tr>
        </table>
        <div id="top1" align="center">
        <input type="button" id="btn2" value="批量删除" onclick="dele(0)" />
        <input type="button" id="btn3" value="全选" onclick="quan()" />
        <input type="button" id="btn4" value="反选" onclick="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='#' onclick='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>