zoukankan      html  css  js  c++  java
  • DOM table添加删除

    <!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>
    

      

  • 相关阅读:
    手写web框架之加载配置项目
    JAVA中注解的实现原理
    使用Mock 测试 controller层
    如何写resultful接口
    RSA加密、解密、签名、验签的原理及方法
    AES256位加密
    聊聊分布式事务,再说说解决方案
    分布式锁简单入门以及三种实现方式介绍
    redis总结(面试中容易遇到的)
    字符串匹配的KMP算法
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5268199.html
Copyright © 2011-2022 走看看