动态增删行

最新推荐文章于 2024-09-08 21:17:37 发布

maccter

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量94

点赞数

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

本文链接：https://blog.csdn.net/maccter/article/details/84198785

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

<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" οnclick="javascript:tableDel();"  value="DEL"/></td>
 </tr>	
</table>
 
<table width="50%">
 <tr>
 <td align="center"><input type="button" οnclick="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" οnclick="javascript:tableDel();"  value="DEL"/>
</div>

</body>	
</html>

maccter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态增删行

好用的动态增删行，很好用...&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt; &lt;script type="text/javascript" &gt; function tableAdd(){ var rownum = table1.rows.length; var newRow = table1.ins...
复制链接

扫一扫

专栏目录