动态增删行

好用的动态增删行,很好用...
<html>
<head></head>
<body>
	<script type="text/javascript" >
		function tableAdd(){
			var rownum = table1.rows.length;
			var newRow = table1.insertRow(rownum);
			
			newRow.insertCell(0).innerHTML=document.all.div1.innerHTML;
			newRow.insertCell(1).innerHTML=document.all.div2.innerHTML;
			newRow.insertCell(2).innerHTML=document.all.div3.innerHTML;
			newRow.insertCell(3).innerHTML=document.all.div4.innerHTML;
			}
			
		function tableDel(){
			
			var rowIndex = getRowIndex();
			table1.deleteRow(rowIndex);
			
			}
		function getRowIndex(){
			
			try{
				
				var Elm = event.srcElement;
				while(Elm && Elm.tagName != "TR"){
					Elm = Elm.parentElement;
					}
				  var intRowIndex = Elm.rowIndex;
				  return intRowIndex;
				
				}catch(ex){
				
				}
			}
			
	</script>
	
<table id="table1" border="1" width="50%">
 <tr>
 <td>1</td>	
 <td>1</td>	
 <td>1</td>	
 <td><input type="button" onclick="javascript:tableDel();"  value="DEL"/></td>
 </tr>	
</table>
 
<table width="50%">
 <tr>
 <td align="center"><input type="button" onclick="javascript:tableAdd();"  value="Add"/>
 </td>
 </tr>
</table>	


<div id="div1" style="display:none">
<input type="text" value="div1"/>	
</div>
<div id="div2" style="display:none">
<input type="text" value="div2"/>	
</div>
<div id="div3" style="display:none">
<input type="text" value="div3"/>	
</div>
<div id ="div4" style="display:none">
<input type="button" onclick="javascript:tableDel();"  value="DEL"/>
</div>

</body>	
</html>

 

你可能感兴趣的:(动态)