前端基础 | 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 = "<td>"+name+"</td>"+
				//				"<td>"+email+"</td>"+
				//				"<td>"+salary+"</td>"+
				//				"<td><a href='javascript:;'>Delete</a></td>";



				//向a中添加href属性
				a.href = "javascript:;";
				//为a添加删除
				a.onclick = del;
				
				var employeeTable = document.getElementById("employeeTable");
				var tbody = employeeTable.getElementsByTagName("tbody")[0];
				tbody.appendChild(tr);
			}
			
		};
	</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是希望

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值