纯JS实现表单的増删改查操作

以往页面表单的増删改查、是通过连接数据库完成的。今天我们不用数据库，用纯JS来完成 。先为看一下效果图。

填加完后在最上面显示出来：

点击修改在中间显示当行的内容：

下面上代码 ：

填加：

 //增加
    function addUser(){
        //获取填入表单的信息
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;
        var email = document.getElementById("email").value;
        var bir = document.getElementById("bir").value;
        
        
        //获取表格节点对象table
        var tusers = document.getElementById("tusers");
        //创建<tr>
        var tr1 = document.createElement("tr");
        //var cbk = document.createElement("td");
        //创建<td>
        var tname = document.createElement("td");
        var tsex = document.createElement("td");
        var temail = document.createElement("td");
        var tbir = document.createElement("td");
        var toper = document.createElement("td");
        var caozuo = document.createElement("td");
        
        // cbk.appendChild(document.createTextNode("<input type='checkbox' name='cbk'/>"));
        //在创建是行填加子节点，内容是刚才填入表单中name的值班。相当于：<td>name的值</td>
        tname.appendChild(document.createTextNode(name));
        tsex.appendChild(document.createTextNode(sex));
        temail.appendChild(document.createTextNode(email));
        tbir.appendChild(document.createTextNode(bir));
        //创建<a>
        var udelete = document.createElement("a");
        var uupdate = document.createElement("a");
        udelete.setAttribute("href", "#");
        uupdate.setAttribute("href", "#");
        
        
        udelete.appendChild(document.createTextNode("删除|"));
        uupdate.appendChild(document.createTextNode("修改"));
        //填加到操作对应位置上
        caozuo.appendChild(udelete);
        caozuo.appendChild(uupdate);
        
        
        //往行中添加:相当于<td>中填加<td>
        tr1.appendChild(tname);
        tr1.appendChild(tsex);
        tr1.appendChild(temail);
        tr1.appendChild(tbir);
        tr1.appendChild(caozuo);
        //获得<tbody>，把<tr>填加进去，再将<tbody>填中到<table>中
        var tb = document.getElementById("tbody");
        tb.appendChild(tr1);
        tusers.appendChild(tb);
		
		var tbody=document.getElementById("tbody");
		var trs=tbody.getElementsByTagName("td");

删除代码：

 udelete.onclick = function(){
            tb.removeChild(udelete.parentNode.parentNode);
        }

修改代码：

        uupdate.onclick = function(){
            //先得到<tr>标签
            var utr = uupdate.parentNode.parentNode;
            //所有子标签<tr>
            var uall = utr.childNodes;
            //将要修改的信息显示在另外一个表单中
            document.getElementById("uname").value = uall[0].innerHTML;
            document.getElementById("usex").value = uall[1].innerHTML;
            document.getElementById("uemail").value = uall[2].innerHTML;
            document.getElementById("ubirthday").value = uall[3].innerHTML;
            //确认修改
            var updateok = document.getElementById("updateOK");
            updateok.onclick = function(){
                uall[0].innerHTML = document.getElementById("uname").value;
                uall[1].innerHTML = document.getElementById("usex").value;
                uall[2].innerHTML = document.getElementById("uemail").value;
                uall[3].innerHTML = document.getElementById("ubirthday").value;
                
            }
        }

下次将实现分页显示