DOM table添加删除

最新推荐文章于 2019-06-22 17:54:39 发布

weixin_34034670

最新推荐文章于 2019-06-22 17:54:39 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/mingjixiaohui/p/5268199.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
				
		window.onload = function(){

			var oTab = document.getElementById("tab1");
		
			var oBtn = document.getElementById("btn1");
			var oName = document.getElementById("name");
			var oAge = document.getElementById("age"); 
			var aA = document.getElementsByTagName("a");
			var id = oTab.tBodies[0].rows.length+1;
			oBtn.onclick = function(){
				var oTr = document.createElement("tr");
				
				var oTd = document.createElement("td");
				oTd.innerHTML = id++;
				oTr.appendChild(oTd);
				
				var oTd = document.createElement("td");
				oTd.innerHTML = oName.value;
				oTr.appendChild(oTd);
				
				var oTd = document.createElement("td");
				oTd.innerHTML = oAge.value;
				oTr.appendChild(oTd);
				
				var oTd = document.createElement("td");
				oTd.innerHTML = "<a href='javascript:;'>删除</a>"
				oTr.appendChild(oTd);
				
				oTab.getElementsByTagName("a")[0].onclick = function(){
					oTab.removeChild(this.parentNode.parentNode);
				};
				
				oTab.tBodies[0].appendChild(oTr);
				
			}
			
		
		}
	</script>
	<body>
	姓名：<input type="text"  id="name"/>
	年龄： <input type="text" id="age"/>
	<input id="btn1" type="button"  value="添加"/>
	<table id="tab1" border="1" width="500">
		
	
		<thead>
			<td>ID</td>
			<td>姓名</td>
			<td>年龄</td>
			<td>操作</td>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Blue</td>
				<td>27</td>
				<td></td>
			</tr>
			<tr>
				<td>2</td>
				<td>张三</td>
				<td>23</td>
				<td></td>
			</tr>
			<tr>
				<td>3</td>
				<td>李四</td>
				<td>22</td>
				<td></td>
			</tr>
			<tr>
				<td>4</td>
				<td>王五</td>
				<td>25</td>
				<td></td>
			</tr>
			<tr>
				<td>5</td>
				<td>张伟</td>
				<td>24</td>
				<td></td>
			</tr>
			
		</tbody>
		
	</table>
	</body>
</html>

转载于:https://www.cnblogs.com/mingjixiaohui/p/5268199.html

weixin_34034670

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM table添加删除

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script> window.onload = function(){ var oTab...
复制链接

扫一扫