js动态增删行示例【表单-源码】【JS】

Q:如何动态创建表单控件呢？ 比如表单上设置一个增加button，当我点击一下该button，那么表单上就会创建一个文本框；同时我在表单上设置一个删除button，当我点击一下该button，那么就会将该文本框删除。

A:该需求在业务允许的前提下，可考虑在表单内放包含元素，嵌套一个网格类型的视图来实现，或者采用js，动态实现增删行。具体实现脚本可类似以下示例：

1. <script>
   
2. var i=2
   
3. //allCount=1
   
4. function   insRow()   //增加一行
   
5. {
   
6.         x=ttb98.insertRow(ttb98.rows.length);
   
7.       var  num=document.getElementById('ttb98').value;  //ttb98为tableid，详见附件。
   
8.         x.ln=i;
   
9.         h2=x.insertCell(0);
   
10.         h1=x.insertCell(1);
    
11.         
    
12.         h2.innerHTML="";
    
13.         //c1.ln=allCount;
    
14.         h1.innerHTML= "新增行"+(i-1)+"&nbsp;：<input   type=button   value= '删除 '   ln= "   +   i   +   "   onclick= 'javascript:delRow(); '> "
    
15. 
    
16.         i=i+1;  //总计多少行
    
17.        // frm.count.value   =   i;
    
18. 
    
19. }
    
20. 
    
21. function   delRow()   //删除一行
    
22. {
    
23.         line   =   parseInt(event.srcElement.ln,10);
    
24. 
    
25.         if   (line> 0){
    
26.                 for   (j=1;j <ttb98.rows.length;j++) {
    
27. 
    
28.       if   (ttb98.rows[j].ln==line)   //
    
29.                         {
    
30.                                 ttb98.deleteRow(j);
    
31.               i--;
    
32.            //   frm.count.value   =     i;
    
33.                         }
    
34.                         }
    
35.                         }
    
36. }
    
37. </script>

复制代码

附件是在平台采用js实现的动态增删行demo，具体效果可请先在平台建立一新表单，然后下载附件copy到到表单源码，保存之后，新建菜单链接至该表单即可。
js动态增删行示例.rar (693 Bytes, 下载次数: 1485)

2012-10-22 18:11 上传

点击文件名下载附件