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

最新推荐文章于 2020-10-21 10:53:06 发布

歌歌

最新推荐文章于 2020-10-21 10:53:06 发布

阅读量741

点赞数

文章标签： function email 数据库 table input

本文链接：https://blog.csdn.net/PasiOn_HeaArt/article/details/6261208

版权

以往页面表单的増删改查、是通过连接数据库完成的。今天我们不用数据库，用纯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; } }

下次将实现分页显示