js自动增行并得到每行的值（增、删）

最新推荐文章于 2021-11-03 21:25:39 发布

宝宝要努力

最新推荐文章于 2021-11-03 21:25:39 发布

阅读量823

点赞数

分类专栏： Java 文章标签： class input button border function java

Java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

java代码如下：

1.<html>   
2.<head>    
3.<script type="text/javascript">   
4.function addMyRow(){                
5.             var mytable = document.getElementById("mybody");                
6.             var len=mytable.rows.length;      
7.             var i=len-1;             
8.             var mytr = mytable.insertRow(len);                    
9.             mytr.setAttribute("id","tr"+i);   
10.           var mytd_1=mytr.insertCell(0);    
11.           mytd_1.align='center';           
12.           //mytd_1.setAttribute("class","index");    
13.             var mytd_2=mytr.insertCell(1);      
14.             var mytd_3=mytr.insertCell(2);      
15.             var mytd_4=mytr.insertCell(3);      
16.             var mytd_5=mytr.insertCell(4);     
17.               
18.             mytd_1.innerHTML=len;    
19.         
20.             mytd_2.innerHTML="<input type='text' id='name"+i+"'"+" name='name"+i+"'/>";     
21.             mytd_3.innerHTML="<input type='text' id='area"+i+"' name='area"+i+"'/>";    
22.             mytd_4.innerHTML="<input type='text' id='qty"+i+"' name='qty"+i+"'/>";                  
23.             mytd_5.innerHTML="<a href='#;return false;' οnclick='delMyRow("+i+")'><font color='#FF9933'>删除</font></a>";       
24.         }     
25.            
26.        // <!--删除当前行,然后实现重排序-->      
27.         function delMyRow(j){      
28.             var mytable = document.getElementById("mybody");   
29.var len=mytable.rows.length;      
30.var myrow = document.getElementById("tr"+j);   
31.if(document.getElementById('name'+j).value!=''){   
32.if(window.confirm('确定删除这条数据吗？')){   
33.mytable.deleteRow(myrow.rowIndex);   
34.}else{  return false;}   
35.}else{   
36.mytable.deleteRow(myrow.rowIndex);   
37.}   
38.//<!--如果不是删除最后一行，先将后面行输入的数据保存-->   
39.if(j<len-2){   
40.var name=new Array([len-j-2]);   
41.var area=new Array([len-j-2]);   
42.var qty=new Array([len-j-2]);   
43.var k=0;   
44.for(var i=j+1;i<=len-2;i++){   
45.name[k]=document.getElementById('name'+i).value;    
46.area[k]=document.getElementById('area'+i).value;   
47.qty[k]=document.getElementById('qty'+i).value;    
48.mytable.deleteRow(document.getElementById("tr"+i).rowIndex);   
49.k++;   
50.}   
51.//    
52.  
53.var h=j;    
54.for(var i=0;i<len-2-j;i++){   
55.addMyRow();   
56.document.getElementById('name'+h).value=name[i];    
57.document.getElementById('area'+h).value=area[i];   
58.document.getElementById('qty'+h).value=qty[i];    
59.h++;   
60.}   
61.}   
62.}   
63.function getDate() {   
64.    var mytable = document.getElementById("mybody");   
65.    var len = mytable.rows.length;   
66.    var i = len - 1;   
67.    for (var j = 0; j < i; j++) {   
68.  
69.        alert(document.getElementById("name"+j).value);   
70.    }   
71.}   
72.  
73.            
74. </script>   
75.</head>   
76.<body>   
77.<div>   
78.<center>   
79.<input type="button" value="增加一行" οnclick="addMyRow()"/>   
80.<input type="button" value="得到值" οnclick="getDate()"/>   
81.<table width="100%" id="mybody" style="color: #FF9933; border-collapse: collapse;" border="1" bordercolor="#FF9933">   
82.<tr>   
83.<td class="index" align="center">序号</td>   
84.<td class="name" align="center">名称</td>   
85.<td class="area" align="center">展区</td>   
86.<td class="qty" align="center">展位数</td>   
87.<td class="operation" align="center">操作</td>   
88.</tr>   
89.<tr id="tr0">   
90.<td align="center" class="index">1</td>   
91.<!-- 名称 -->   
92.<td><input type="text" id="name0" name="name0" class="name" /></td>   
93.<!-- 展区 -->    
94.      <td><input type="text" id="area0" name="area0" class="area"/></td>   
95.<!-- 展位数 -->   
96.<td><input type="text" id="qty0" name="qty0" class="qty" /></td>   
97.<!--操作-->   
98.<td class="operation" align=center><a href="#;return false;" οnclick="delMyRow(0)">删除</a></td>   
99.</tr>   
100.</table>   
101.<center>   
102.<div>   
103.</body>   
104.</html>