jsDOM增删改查

<h2>学生信息管理</h2>
        <div class="div1">
            <p class="left">姓&emsp;&emsp;&emsp;名&emsp;：<input id="xingming" type="text" /><span></span></p>
            <p class="right">年&emsp;&emsp;&emsp;龄&emsp;：<input id="age" type="text" /><span></span></p>
        </div>
        <p></p>

        <div class="div1">
            <p class="left">性&emsp;&emsp;&emsp;别&emsp;：<input class="xingbie" type="radio" value="男" name="sex" checked />男
                <input class="xingbie" type="radio" value="女" name="sex" />女</p>
            <div class="right">邮&emsp;&emsp;&emsp;箱&emsp;：<input id="email" type="text" /><span></span></div>
        </div>
        <p></p>

        <div class="div1">
            <p class="left">密&emsp;&emsp;&emsp;码&emsp;：<input id="pwd" type="text" /><span></span></p>
            
        </div>
        <p></p>

        <div class="div1">
            
            <p class="right">身份证号码&emsp;：<input id="shenfen" type="text" /><span></span></p>
        </div>
        <p></p>

        <div class="div1">
            <div class="left">手机号码&emsp;&emsp;：<input id="shouji" type="text" /><span></span></div>
            
        </div>
        <p></p>

        <div class="div1">
            <button id="tijiao">提交</button>&emsp;
            <button id="chaxun">查询</button>&emsp;
            <input id="neirong" type="text" /><br /><br /><br /><br /><br />
        </div>
        <!--//this.parentNode.nextElementSibling.firstElementChild.firstElementChild.firstElementChild-->
        <div class="div2">
            <table id="biaoge" border="1">
                <tr>
                    <td>
                        <button οnclick="cheAll()">全选</button>
                    </td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>密码</td>
                    <td>邮箱</td>
                    <td>身份证号码</td>
                    <td>手机号码</td>
                    <td>
                        <button οnclick="cheDel()">全部删除</button>
                    </td>
                </tr>
                

            </table>
        </div>

//获取元素的属性

var oXingming = document.getElementById("xingming");
                var oAge = document.getElementById("age");
                var oPwd = document.getElementById("pwd");
                var oEmail = document.getElementById("email");
                var oXingbie = document.getElementsByClassName("xingbie");
                var oShenfen = document.getElementById("shenfen");
                var oShouji = document.getElementById("shouji");
                var oTijiao = document.getElementById("tijiao");
                var oChaxun = document.getElementById("chaxun");
                var oneirong = document.getElementById("neirong");
                var otbody = document.getElementsByTagName("tbody")[0];
                oTijiao.οnclick=function(){
                    //创建tr标签节点
                    var otr=document.createElement('tr');
                    //创建td标签节点
                    var otd1=document.createElement('td');
                    var otd2=document.createElement('td');
                    var otd3=document.createElement('td');
                    var otd4=document.createElement('td');
                    var otd5=document.createElement('td');
                    var otd6=document.createElement('td');
                    var otd7=document.createElement('td');
                    var otd8=document.createElement('td');
                    var otd9=document.createElement('td');
                    //创建文本节点
                    otd1.innerHTML='<input type="checkbox" class="danxuan">';
                    var ot2=document.createTextNode(oXingming.value);
                    if(oXingbie[0].checked){
                        var ot3=document.createTextNode('男');
                    }else{
                        var ot3=document.createTextNode('女');
                    }
                    var ot4=document.createTextNode(oAge.value);
                    var ot5=document.createTextNode(oPwd.value);
                    var ot6=document.createTextNode(oEmail.value);
                    var ot7=document.createTextNode(oShenfen.value);
                    var ot8=document.createTextNode(oShouji.value);
                    otd9.innerHTML='<button οnclick="remove(this)">删除</button>';
                    //把文本节点插入到td节点里面
                    otd2.appendChild(ot2)
                    otd3.appendChild(ot3)
                    otd4.appendChild(ot4)
                    otd5.appendChild(ot5)
                    otd6.appendChild(ot6)
                    otd7.appendChild(ot7)
                    otd8.appendChild(ot8)
                    //把td标签插入到tr标签里面
                    otr.appendChild(otd1)
                    otr.appendChild(otd2)
                    otr.appendChild(otd3)
                    otr.appendChild(otd4)
                    otr.appendChild(otd5)
                    otr.appendChild(otd6)
                    otr.appendChild(otd7)
                    otr.appendChild(otd8)
                    otr.appendChild(otd9)
                    //把tr标签插入到tbody标签里面
                    otbody.appendChild(otr)
                }
                var odanduan=document.getElementsByClassName('danxuan');//获取单选input框
                //点击全选事件
                function cheAll(){
                    for(var i=0; i<odanduan.length; i++){//循环所有的单选input框，让他们全部选中
                        odanduan[i].checked=true;
                    }
                }
                //全部删除事件
                function cheDel(){           
                    for(var i=0; i<odanduan.length; i++){//循环所有的单选input框
                        if(odanduan[i].checked){//判断所有的单选input框是否被选中
                            otbody.removeChild(odanduan[i].parentNode.parentNode);
                            //找到otbody标签通过removeChild删除方法删除单选按钮的父级的父级
                            i--;
                        }
                        // 1：点击全选按钮，选中input框
                        //  2：判断input框是否被选中，选中的话就删除input框的

                                父级的父（tr）， 没有被选中不删除
                        3：i--的目的
                            因为每删除一个input框，所有input框的长度就会少一个，避免了漏删除的input框
                        
                    }
                }
                单选删除事件
                function remove(_this){
                    otbody.removeChild(_this.parentNode.parentNode)
                }

                function remove(_this){
                    //_this指的是单删除按钮
                    //找到单删除按钮的父元素的父元素的第一个子标签元素的第一个子标签input框是否被选中
                    if(_this.parentNode.parentNode.firstElementChild.firstElementChild.checked){
                        otbody.removeChild(_this.parentNode.parentNode);
                        //删除otbody标签里面tr标签
                        //_this.parentNode.parentNode  单删除按钮的父元素的父元素
                    }else{
                        alert('您未选中')
                    }
                    
                }
                
                //查询
                var oTr=document.getElementsByTagName('tr');

                oChaxun.οnclick=function(){
                   if(!oneirong.value){
                        alert('请输入查询内容')
                    }else{
                        for(var i=1; i<oTr.length-1; i++){
                            for(var k=1; k<oTr[i].childElementCount; k++){
                                if(oneirong.value==oTr[i].children[k].innerText){
                                    oTr[k].style.display='none';
                                }
                            }
                            oTr[i].style.display='block';
                        }
                    }
               }
               oChaxun.οnclick=function(){
                    for(var i=1; i<oTr.length; i++){
                        //oTr[i].innerText.search(oneirong.value)
                        //'问问    男    4    1    5    2    3    删除'.search(男)
                       if(oTr[i].innerText.search(oneirong.value)==-1){
                          oTr[i].style.display='none';
                        }    
                    }

              }