前端杂学 | DOM增删练习

网页操作界面

HTML代码

<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" >
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

CSS代码

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}

JavaScript代码

<script type="text/javascript">			
		//删除函数	
		function del(){
			
			var tr = this.parentNode.parentNode;
			//要删除员工的名字
			var name = tr.children[0].innerHTML;
			var flag = confirm("确认删除"+name+"员工吗？");
			if(flag){
				//如果为真，删除
				tr.parentNode.removeChild(tr);
			}
			return false;
		}
		
		window.onload = function(){
			//为每个a绑定单击函数
			var allA = document.getElementsByTagName("a")
			for(var i=0;i<allA.length;i++){
				allA[i].onclick = del;
			}
			
			var addEmpButton = document.getElementById("addEmpButton");
			addEmpButton.onclick = function(){
				//获取员工信息
				var name = document.getElementById("empName").value;
				var email = document.getElementById("email").value;
				var salary = document.getElementById("salary").value;
//第一种方法创建
				//创建一个tr和四个td
				var tr = document.createElement("tr");
				var nametd = document.createElement("td")
				var emailtd = document.createElement("td");
				var salarytd = document.createElement("td");
				var atd = document.createElement("td");
				var a = document.createElement("a");
				//创建文本节点
				var name_text = document.createTextNode(name);
				var email_text = document.createTextNode(name);
				var salary_text = document.createTextNode(name);
				var a_text = document.createTextNode("Delete");
				//将文本节点添加到td
				nametd.appendChild(name_text);
				emailtd.appendChild(email_text);
				salarytd.appendChild(salary_text);
				//先将a_text添加至a,再将a添加至atd
				a.appendChild(a_text);
				atd.appendChild(a);
				
				//将各部分的td添加至tr中
				tr.appendChild(nametd);
				tr.appendChild(emailtd);
				tr.appendChild(salarytd);
				tr.appendChild(atd);
//第二种方法创建
		//创建一个tr
				//var tr = document.createElement("tr");

				//设置tr中的内容
				//tr.innerHTML = ""+name+""+
				//				""+email+""+
				//				""+salary+""+
				//				"Delete";



				//向a中添加href属性
				a.href = "javascript:;";
				//为a添加删除
				a.onclick = del;
				
				var employeeTable = document.getElementById("employeeTable");
				var tbody = employeeTable.getElementsByTagName("tbody")[0];
				tbody.appendChild(tr);
			}
			
		};
	</script>