动态增删行

最新推荐文章于 2025-08-11 19:52:03 发布

maccter

最新推荐文章于 2025-08-11 19:52:03 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/maccter/article/details/84198785

Javascript 专栏收录该内容

6 篇文章

订阅专栏

好用的动态增删行，很好用...

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