javascript中DOM实现用户的增删改案例详解----

最新推荐文章于 2019-05-26 17:21:05 发布

原创最新推荐文章于 2019-05-26 17:21:05 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #email #function #input #stylesheet #button

本文介绍了一个用于展示和管理用户信息的HTML页面实现方案，包括如何添加、修改和删除用户记录的功能，并通过JavaScript实现了动态更新表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

<h2>所有的用户信息</h2>

<thead>

<tr>

</tr>

　　　　　　 </thead>

　　　　　　</tbody>

</table>

</div>

<form>

<tr>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type=button value="oo"

onclick="showCalendar(this,document.all.bir)">

</td>

</tr>

<input type="button" value="添加"

onclick="addUser()" id="add"/>

</td>

</tr>

</td>

</tr>

</tbody>

</table>

</form>

</div>

</body>

</html>

<!--

window.onload=function(){

document.getElementById("update1").style.display="none";

}

//添加操作

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;

//获取表格节点对象

var tusers = document.getElementById("tusers");

//创建行

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

//创建cbk列

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

//创建tname列

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

//创建tsex列

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

//创建temail列

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

//创建tbir列

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

//创建toper列

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

//创建一个checkbox对象cbk1

var cbk1 = document.createElement("input");

cbk1.setAttribute("type","checkbox");

cbk1.setAttribute("name","chbk");

//把checkbox对象cbk1放到cbk列中

cbk.appendChild(cbk1);

//创建name对象并把它放到tname列中

tname.appendChild(document.createTextNode(name));

//创建sex对象并把它放到tsex列中

tsex.appendChild(document.createTextNode(sex));

//创建email对象并把它放到temail列中

temail.appendChild(document.createTextNode(email));

//创建bir对象并把它放到tbir中

tbir.appendChild(document.createTextNode(bir));

//创建a元素adelete和aupdate

var adelete = document.createElement("a");

var aupdate = document.createElement("a");

//并分别给它们设置属性

adelete.setAttribute("href","#");

aupdate.setAttribute("href","#");

//在设置它们的文本节点

adelete.appendChild(document.createTextNode("删除 |"));

aupdate.appendChild(document.createTextNode("修改"));

//把a元素的对象adelete和aupdate放到toper列中

toper.appendChild(adelete);

toper.appendChild(aupdate);

//把列添加行中

tr1.appendChild(cbk);

tr1.appendChild(tname);

tr1.appendChild(tsex);

tr1.appendChild(temail);

tr1.appendChild(tbir);

tr1.appendChild(toper);

//获取将其要添加到的地方的元素节点

var users = document.getElementById("users");

//将创建的行放入

users.appendChild(tr1);

//再放入表格对象中

tusers.appendChild(users);

//删除操作

adelete.onclick = function(){

users.removeChild(adelete.parentNode.parentNode);

}

//修改操作

aupdate.onclick = function(){

//隐藏添加标签

document.getElementById("add1").style.display="none";

document.getElementById("update1").style.display="block";

//获取行对象

var utr = aupdate.parentNode.parentNode;

//获取行的所有子节点

var utrs= utr.childNodes;

//将获取的内容放到文本框中

document.getElementById("name").value=utrs[1].innerHTML;

document.getElementById("sex").value=utrs[2].innerHTML;

document.getElementById("email").value=utrs[3].innerHTML;

document.getElementById("bir").value=utrs[4].innerHTML;

//获取修改按钮的节点元素

var upUser = document.getElementById("upduser");

//点击修改按钮

upUser.onclick = function(){

//将文本框的值添加到表格中

utr.childNodes[1].innerHTML = document.getElementById("name").value;

utr.childNodes[2].innerHTML = document.getElementById("sex").value;

utr.childNodes[3].innerHTML = document.getElementById("email").value

utr.childNodes[4].innerHTML = document.getElementById("bir").value

//隐藏修改标签

document.getElementById("update1").style.display="none";

document.getElementById("add1").style.display="block";

}

//-->

</script>