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>
    

      

  • 相关阅读:
    POJ 1141 括号匹配 DP
    881. Boats to Save People
    870. Advantage Shuffle
    874. Walking Robot Simulation
    文件操作
    861. Score After Flipping Matrix
    860. Lemonade Change
    842. Split Array into Fibonacci Sequence
    765. Couples Holding Hands
    763. Partition Labels
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5268199.html
Copyright © 2011-2022 走看看