JavaScript DOM编程 学习笔记-删除节点
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//测试removeChild()方法 删除节点
window.onload = function() {
//alert(1);
var bjNode = document.getElementById("bj");
//var c = bjNode.parentNode.removeChild(bjNode);//指向已经删除的节点
//alert(c.firstChild.nodeValue);
//为li节点添加一个confirm
var liNodes = document.getElementsByTagName("li");
//alert(liNodes.length);
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
var flag = confirm("确认要删除" + this.firstChild.nodeValue + "吗？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>深圳</li>
<li>深圳2</li>
</ul>
<p>你喜欢哪本书？</p>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
<li>水浒传2</li>
</ul>
<br />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
//为a节点添加点击事件
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
document.getElementById("addEmpButton").onclick = function(){
var nameVal = document.getElementById("name").value;
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value;
//alert(nameVal);
/*
if(!nameVal || !emailVal || !salaryVal){
alert("请将信息填写完整");
return false;
}
*/
if(trim(nameVal) == "" || trim(emailVal) == "" || trim(salaryVal) == ""){
alert("请将信息填写完整");
return false;
}
//创建td节点
var nameTd = document.createElement("td");
//创建文本节点并且将其添加到td节点下
nameTd.appendChild(document.createTextNode(nameVal));
//创建td节点
var emailTd = document.createElement("td");
//创建文本节点并且将其添加到td节点下
emailTd.appendChild(document.createTextNode(emailVal));
//创建td节点
var salaryTd = document.createElement("td");
//创建文本节点并且将其添加到td节点下
salaryTd.appendChild(document.createTextNode(salaryVal));
//创建tr节点
var tr = document.createElement("tr");
//将td节点添加到tr节点下面
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
//创建a节点
var aNode = document.createElement("a");
aNode.href = "deleteEmp?id=XXX";
aNode.appendChild(document.createTextNode("Delete"));
//为新建的a节点添加点击事件
aNode.onclick = function(){
removeTr(this);
return false;
}
//创建td节点
var aTd = document.createElement("td");
//将a节点添加到td节点
aTd.appendChild(aNode);
//将td节点添加到tr节点
tr.appendChild(aTd)
//将tr节点添加到table中
document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(tr);
}
}
//正则表达式去除字符串前后空格
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
function removeTr(aNode){
//得到tr
var trNode = aNode.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0].firstChild.nodeValue;
//alert(textContent);
textContent = trim(textContent);
var flag = confirm("确定删除"+ textContent +"的信息吗？");
if(flag){
//从tbody中删除tr
trNode.parentNode.removeChild(trNode);
}
return false;
}
</script>
</head>
<body>
<center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</html>
使用JQuery实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
window.onload = function() {
/*
var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
//为a节点添加点击事件
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
*/
$("#employeetable a").click(function(){
removeTr(this);
return false;
});
$("#addEmpButton").click(function(){
if($.trim($("#name").val()) == "" || $.trim($("#email").val()) == "" || $.trim($("#salary").val()) == ""){
alert("请将信息填写完整");
return false;
}
$("<tr></tr>").append("<td>" + $.trim($("#name").val()) + "</td>")
.append("<td>" + $.trim($("#email").val()) + "</td>")
.append("<td>" + $.trim($("#salary").val()) + "</td>")
.append("<td><a href='deleteEmp?id=XXX'>Delete</a></td>")
.appendTo("#employeetable tbody")
.find("a")//为tr中的a节点添加点击事件
.click(function(){
removeTr(this);
return false;
});
//添加完成后清空文本框
$("#name").val("");
$("#email").val("");
$("#salary").val("");
});
}
function removeTr(aNode){
//得到tr
//var trNode = aNode.parentNode.parentNode;
var $trNode = $(aNode).parent().parent();
var textContent = $trNode.find("td:first").text();
//alert(textContent);
textContent = $.trim(textContent);
var flag = confirm("确定删除"+ textContent +"的信息吗？");
if(flag){
//从tbody中删除tr
$trNode.remove();
}
return false;
}
</script>
</head>
<body>
<center>
<br> <br> 添加新员工 <br> <br> name: <input type="text"
name="name" id="name" /> email: <input type="text"
name="email" id="email" /> salary: <input type="text"
name="salary" id="salary" /> <br> <br>
<button id="addEmpButton" value="abc">Submit</button>
<br> <br>
<hr>
<br> <br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</html>