JS实现列表的增加和删除功能,需求如下:
输入姓名,email,电话,点击提交,添加到下面的列表中,如下:
这个主要是练习javascript的DOM操作,实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加用户</title>
</head>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
//1 按钮的onclick事件
//<button id="addUser">提交</button>
document.getElementById("addUser").onclick = function(){
//2 获取上面三个文本框的值
/*
* 姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
*/
var nameValue = document.getElementById("name").value;
var emailValue = document.getElementById("email").value;
var telValue = document.getElementById("tel").value;
//3 插入到下面的table中
/*
* <tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
*/
var tr = document.createElement("tr");
var nameTd = document.createElement("td");
var nameText = document.createTextNode(nameValue);
nameTd.appendChild(nameText);
var emailTd = document.createElement("td");
var emailText = document.createTextNode(emailValue);
emailTd.appendChild(emailText);
var telTd = document.createElement("td");
var telText = document.createTextNode(telValue);
telTd.appendChild(telText);
var aTd = document.createElement("td");
var a = document.createElement("a");
a.setAttribute("href","deleteEmp?id="+nameValue);
var aText = document.createTextNode("Delete");
a.appendChild(aText);
aTd.appendChild(a);
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(telTd);
tr.appendChild(aTd);
var table = document.getElementById("usertable");
//原因:因为火狐及其他浏览器,在页面中查找不到tbody标签
var tbody = document.createElement("tbody");
tbody.appendChild(tr);
table.appendChild(tbody);
a.onclick = function(){
/*
* <tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
*/
var trElement = a.parentNode.parentNode;
var nameElement = trElement.firstChild.firstChild.nodeValue;
var flag = window.confirm("你确认要删除"+nameElement+"这个用户吗?");
if(!flag){
//取消
/*
* * 禁止页面刷新
* * 实际上,在页面中无论你是否有提交页面的动作,页面都会提交。
* 导致页面提交没有设置提交页面,导致错误404 找不到页面。
* * return false的作用就是不让页面自动提交。
*/
return false;
}else{
//确认
var parentElement = trElement.parentNode;
parentElement.removeChild(trElement);
return false;
}
}
}
</script>
</html>