javascript dom simpledemo

最新推荐文章于 2025-09-06 08:01:57 发布

_noname

最新推荐文章于 2025-09-06 08:01:57 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/williamfan21c/article/details/53921997

web 专栏收录该内容

59 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
		1. 点击submit添加一行员工信息
		2. 点击delete, 删除当前行的员工信息
	*/

	//添加onload事件监听
	window.onload = function(){
		/*1. 点击submit添加一行员工信息*/
		//1. 给submit添加点击事件
		document.getElementById("addEmpButton").onclick = function(){
			//alert("------");
			
			//2. 得到输入的员工的三个信息数据
			var name = document.getElementById("name").value; //ctrl+alt+down
			var email = document.getElementById("email").value; //ctrl+alt+down
			var salary = document.getElementById("salary").value; //ctrl+alt+down
			//alert(salary);
			
			//3. 生成一个下面的标签对象结构
			/*
				<tr>
					<td>name</td>
					<td>email</td>
					<td>salary</td>
					<td><a href="deleteEmp?id=5">Delete</a></td>
				</tr>
			*/
			//<tr></tr>
			var trEle = document.createElement("tr");
			
			//<td>name</td>
				//<td></td>
			var tdEle = document.createElement("td");
				//name
			var textNode = document.createTextNode(name);
				//<td>name</td>
			tdEle.appendChild(textNode);
			//<tr><td>name</td></tr>
			trEle.appendChild(tdEle);
			
			//<td>email</td>
			tdEle = document.createElement("td");
			textNode = document.createTextNode(email);
			tdEle.appendChild(textNode);
			//<tr><td>name</td><td>email</td></tr>
			trEle.appendChild(tdEle);
			
			//<td>salary</td>
			tdEle = document.createElement("td");
			textNode = document.createTextNode(salary);
			tdEle.appendChild(textNode);
			
			//<tr><td>name</td><td>email</td><td>salary</td></tr>
			trEle.appendChild(tdEle);
			
			//<td><a href="deleteEmp?id=5">Delete</a></td>
			tdEle = document.createElement("td");
			var id = 0;
			//id的值为tr标签的个数
			id = document.getElementsByTagName("tr").length;
			alert(id);
			
			tdEle.innerHTML = '<a href="deleteEmp?id='+id+'">Delete</a>';
			
			//<tr><td>name</td><td>email</td><td>salary</td><td><a href="deleteEmp?id=5">Delete</a></td></tr>
			trEle.appendChild(tdEle);
			
			//4. 得到tbody标签对象
			var tbodyEle = document.getElementById("employeetable");
			
			//5. 将新建的tr标签对象添加为tbody标签的子标签
			tbodyEle.appendChild(trEle);
		};
		
		/*2. 点击delete, 删除当前行的员工信息*/
		//1. 给delete链接添加一个点击监听
		var aEles = document.getElementsByTagName("a"); //所有a标签的数组
		//遍历
		for(var i=0;i<aEles.length;i++) {
			var aEle = aEles[i];
			aEle.onclick = function(){ //this代表当前发生事件的标签对象
				//alert出href
				//alert(this.href);
				//alert("----");
				
				//得到当前行的tr标签对象
				var currTrEle = this.parentNode.parentNode;
				
				//得到tbody标签对象
				var tbodyEle = document.getElementById("employeetable");
				
				//removeChild()
				tbodyEle.removeChild(currTrEle);
				
				return false;//使链接失效
			};
		}
		
	};
	
	/*
		 问题: 自己添加的员工信息不能删除?
	*/
</script>

</head>
<body>
<div align="center">
	<h2>添加新员工</h2>
	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">Submit</button>
	
	<br> <br>
	<hr>
	<br> <br>
	
	<table  border="1" cellpadding="5" cellspacing=0 style="width: 400px;">
		<tbody id="employeetable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th> </th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=1">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=2">Delete</a></td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td><a href="deleteEmp?id=3">Delete</a></td>
			</tr>
			<tr>
				<td>JACK</td>
				<td>jack@tom.com</td>
				<td>12000</td>
				<td><a href="deleteEmp?id=4">Delete</a></td>
			</tr>
			
		</tbody>
	</table>
</div>

</body>
</html>