js基础操作dom改变元素

最新推荐文章于 2024-09-10 10:25:08 发布

原创最新推荐文章于 2024-09-10 10:25:08 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个HTML页面，展示了如何在员工信息表中添加新员工并实现删除功能，包括使用JavaScript处理删除链接触发的确认对话框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加员工事件</title>
	</head>
	<body>
		<table border="1px" cellspacing="" id="employeeTable" cellpadding="">
			<tr>
				<th>name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<th>tom@tom.com</th>
				<th>8000</th>
				<th><a href="JavaScript:">Delete</a></th>
			</tr>
			<tr>
				<td>jerry</td>
				<th>jerry@tom.com</th>
				<th>5000</th>
				<th><a href="deleteEmp?id=002">Delete</a></th>
			</tr>
			<tr>
				<td>bob</td>
				<th>bob@tom.com</th>
				<th>10000</th>
				<th><a href="deleteEmp?id=003">Delete</a></th>
			</tr>
		</table>
		<div id="forDiv">
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName" value="name"/>
					</td>
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp"></td>
						<input type="text" name="email" id="email" value="value"/>
				</tr>
				<tr>
					<td class="word">salary:</td>
					<td class="inp"></td>
						<input type="text" name="salary" id="salary" />
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" >
							Submit 
						</button>
					</td>
				</tr>
				
					
			</table>
		</div>
		<script type="text/javascript">
		//添加删除记录
		
			window.onload = function(){
				//获取所有超链接
				var alla = document.getElementsByTagName('a');
				
				//为每个超链接都绑定一个单击响应函数
				for(var i = 0;i<alla.length;i++){
					alla[i].onclick = function(){
						//点击超链接需要删除超链接所在的那行
						var tr = this.parentNode.parentNode;
						var  name =  tr.getElementsByTagName("td")[0].innerText;
						var flag = confirm("确认删除"+name+'吗？');
						if(flag){
							tr.parentNode.removeChild(tr);//删除子节点
						}
						
						
						return false//取消超链接跳转
					};
				}
				//添加新员工功能
			//点击按钮
			var addEmpButton = document.getElementById('addEmpButton');
			addEmpButton.onclick = function(){
			// 获取到输入的值
			var name = document.getElementById('empName').value;//获取name
			var email = document.getElementById('email').value;//获取email
			var salary = document.getElementById('salary').value;//获取salary
			//添加到表格
			var tr = document.createElement('tr');
			//创建四个tr
			var nametd = document.createElement("td");
			var emailtd = document.createElement("td");
			var salarytd = document.createElement("td");
			var atd = document.createElement("td");
			//创建一个a
			var a =document.createElement('a');
			//创建文本节点
			var nametext = document.createTextNode(name);
			var emailtext = document.createTextNode(email);
			var salarytext = document.createTextNode(salary);
			var deltext = document.createTextNode('delete');
			//将文本添加到td中
			nametd.appendChild(nametext);
			emailtd.appendChild(emailtext);
			salarytd.appendChild(salarytext);
			//向a中添加文本
			a.appendChild(deltext);
			//将a添加到td中
			atd.appendChild(a);
			//将td添加到tr中
			tr.appendChild(nametd);
			tr.appendChild(emailtd);
			tr.appendChild(salarytd);
			tr.appendChild(atd);
			//向a中添加属性
			a.href= 'javascript:;'
			//为新加的a添加删除事间
			a.onclick = function(){
						//点击超链接需要删除超链接所在的那行
						var tr = this.parentNode.parentNode;
						var  name =  tr.getElementsByTagName("td")[0].innerText;
						var flag = confirm("确认删除"+name+'吗？');
						if(flag){
							tr.parentNode.removeChild(tr);//删除子节点
						}
						
						
						return false//取消超链接跳转
					};
			//获取table
			var employeeTable = document.getElementById('employeeTable')
			//获取employeetable的tbody
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			//将tr添加到table1中
			employeeTable.appendChild(tr);
			};
			
			
			
			
			
			};
		</script>
	</body>
</html>