Javascript第五章表格增、删练习第十二课

「爱情、让人受尽委屈。」 2022-04-24 03:58 192阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<script type="text/javascript">
    		function doAdd(){ 
    			//创建tr
    			var tr=document.createElement("tr");
    		
    			for(var i=1;i<=5;i++){ 
    				//创建td 要循环td
    					var td=document.createElement("td");
    					
    					switch(i){ 
    						case 1:
    						var name=document.getElementById("name").value;
    				td.innerHTML=name;
    				//要把td的值 追加给tr
    				tr.appendChild(td);
    					break;	
    						case 2:
    						var age=document.getElementById("age").value;
    						td.innerHTML=age;
    						tr.appendChild(td);
    						break;
    						case 3:
    						if(document.getElementById("male").checked){ 
    							td.innerHTML="male";
    						tr.appendChild(td);	
    						}else if(document.getElementById("feamle").checked){ 
    							
    							td.innerHTML="female";
    						tr.appendChild(td);	
    							
    						}
    						
    						break;
    						case 4:
    						var email=document.getElementById("email").value;
    						td.innerHTML=email;
    						tr.appendChild(td);	
    						break;
    						
    						case 5:
    						//创建一个按钮
    					var butt=document.createElement("input");
    						butt.type="button";
    						
    						butt.value="删除";
    					butt.onclick=function(){ 
    // document.getElementById("tb").removeChild(tr); //绑定事件实现删除本行
    						//第二种方法parentNode 属性可返回某节点的父节点。
    						document.getElementById("tb").removeChild(this.parentNode.parentNode);  
    						
    					};
    						td.appendChild(butt);
    						tr.appendChild(td);
    						
    				
    						break;
    // 
    					}
    							
    					var tb=document.getElementById("tb");
    					var trs=document.getElementsByTagName("tr");
    				tb.insertBefore(tr,trs[4]);
    			}
    					
    					
    
    					
    
    	
    			}
    		
    		//首行删除 
    		
    		function aaDelete(){ 
    			var tb=document.getElementById("tb");
    			var dd=tb.getElementsByTagName("tr")
    			console.log(dd.nodeType)
    			tb.removeChild(dd[0]);
    
    			
    		}
    		//魔航删除
    		function bbDelete(){ 
    			var tb=document.getElementById("tb");
    			var dd=tb.getElementsByTagName("tr")
    			console.log(dd.nodeType)
    			tb.removeChild(dd[dd.length-2]);
    
    			
    		}
    	</script>
    </head>
    <body>
    	<table border="1px" cellspacing="" cellpadding="" width="500px" height="100px" id="table">
    		<thead>
    			<th>22</th>
    			<th>22</th>
    			<th>22</th>
    			<th>22</th>
    			<th>操作</th>
    			
    		</thead>
    	<tbody id="tb">
    		<tr>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		<td><input type="button" name="" id="" value="删除" /></td>
    		</tr>
    		<tr>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		<td><input type="button" name="" id="" value="删除" /></td>
    		</tr>
    		<tr >
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		<td><input type="button" name="" id="" value="删除" /></td>
    		</tr>
    		
    			<tr>
    			<td colspan="4">
    			<input type="button" name="" id="" value="从首行删除" onclick="aaDelete()"/>
    			<input type="button" name="" id="" value="从末行删除" onclick="bbDelete()"/>
    		</td>
    		</tr>
    		</tbody>
    	</table>
    	
    	<form action="" method="post">
    		<span id="">
    			Name:
    		</span>
    		<input type="text" name="name" id="name" value="" />
    		<br />
    		<span id="">
    			Age:
    		</span>
    		<input type="text" name="" id="age" value="" />
    		<br />
    		<span id="">
    			Gender:
    		</span>
    		<input type="radio" name="sex" id="male" checked="checked" />
    		<label for="male">Male</label>
    		<input type="radio" name="sex" id="female" value="" />
    			<label for="female">Female</label>
    		<br/>
    		<span id="">
    			Email:
    		</span>
    		<input type="text" name="" id="email" value="" />
    		<br />
    		<input type="button" name="" id="" value="add" onclick="doAdd()"/>
    		<input type="reset"  id="reset" value="reset" onclick="doReset()"/>
    	</form>
    </body>
    </html>

第二种方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20190414221922943.png]

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]: /images/20220220/8ce1ae982e5f4d5e8abcba165d7ad9da.png
[20190414221922943.png]: /images/20220220/65a3f0d119ad488f97866f40c1abdca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70 1]: /images/20220220/b17c4c2620f94f75913480cd723dcae6.png