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>