1
2 <form id="form1" runat="server">
3 <div>
4 <table id="orderTable" border='1' cellpadding="1" cellspacing="0" style="border-collapse: collapse; border-color:#C0C0C0;" rules="none" width="80%" align="center">
5 <thead>
6 <tr>
7 <th style="width: 20%;">申报部门</th>
8 <th style="width: 20%;">街镇</th>
9 <th style="width: 20%;">路段名称</th>
10 <th style="width: 30%;">起止路名</th>
11 <th>操作</th>
12 </tr>
13 </thead>
14 <tr id="row0">
15 <td>
16 <select id="UrbanDepNo0" name="UrbanDepNo" style="width:90%">
17 <option value="1">三林城管署</option>
18 <option value="2">港城城管署</option>
19 <option value="3">惠南城管署</option>
20 <option value="4">金桥城管署</option>
21 <option value="5">陆家嘴城管办</option>
22 <option value="6">川沙城管署</option>
23 </select>
24 </td>
25 <td>
26 <input type="text" id="LocNo0" name="LocNo" style="width:90%"/>
27
28 </td>
29 <td>
30 <input type="text" id="RoadSectionName0" name="RoadSectionName" style="width:90%"/>
31 </td>
32 <td>
33 <input type="text" id="StStartRoad0" name="StStartRoad" style="width:45%"/>--
34 <input type="text" id="EndRoadName0" name="EndRoadName" style="width:45%"/>
35 </td>
36 <td>
37 <input type="button" name="delete" value="删 除" style="width:80px" onclick="deleteSelectedRow(0)" />
38
39 </td>
40 </tr>
41 <tr>
42 <td align="center" colspan="5">
43 <br />
44 <input type="button" name="insert" value="增加一行" style="width:80px" onclick="insertNewRow()" />  
45 <input type="button" value=" 保 存 " style="width:80px" onclick="GetValue()" />
46 </td>
47 </tr>
48 </table>
49 </div>
50 <div style="MARGIN: 40px auto;">
51 <table id="TableInfo" border='1' cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color:#C0C0C0;" width="80%" align="center">
52 <tr>
53 <td align="center">
54 申报部门
55 </td>
56 <td align="center">
57 街镇
58 </td>
59 <td align="center">
60 路段名称
61 </td>
62 <td align="center">
63 起止路名
64 </td>
65 <td align="center">
66 操作
67 </td>
68 </tr>
69 </table>
70 </div>
71 </form>
72
73
74
75
76 <script src="jquery.min.js" type="text/javascript"></script>
77 <script type="text/javascript" language='javascript'>
78 //声明全局变量
79 var formvalue = "";
80 var flag = 1;
81 var index = 1;
82 var firstCell = "";
83 var secondCell = "";
84 var thirdCell = "";
85 var fourthCell = "";
86
87 $(function() {
88 //初始化第一行
89 firstCell = $("#row0 td:eq(0)").html();
90 secondCell = $("#row0 td:eq(1)").html();
91 thirdCell = $("#row0 td:eq(2)").html();
92 fourthCell = $("#row0 td:eq(3)").html();
93 });
94
95 //-----------------新增一行-----------start---------------
96
97 function insertNewRow() {
98 //获取表格有多少行
99 var rowLength = $("#orderTable tr").length;
100 //这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。
101 var rowId = "row" + flag;
102
103 //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用 after
104 var insertStr = "<tr id=" + rowId + ">" + "<td style='width: 20%'>" + firstCell + "</td>" + "<td style='width: 20%'>" + secondCell + "</td>" + "<td style='width: 20%'>" + thirdCell + "</td>" + "<td style='width: 30%'>" + fourthCell + "</td>" + "<td><input type='button' name='delete' value='删除' style='width:80px' onclick='deleteSelectedRow(\"" + rowId + "\")' />"; + "</tr>";
105 //这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引
106 $("#orderTable tr:eq(" + (rowLength - 2) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面
107 //为新添加的行里面的控件添加新的id属性。
108 $("#" + rowId + " td:eq(0)").children().eq(0).attr("id", "UrbanDepNo" + flag);
109 $("#" + rowId + " td:eq(1)").children().eq(0).attr("id", "LocNo" + flag);
110 $("#" + rowId + " td:eq(2)").children().eq(0).attr("id", "RoadSectionName" + flag);
111 $("#" + rowId + " td:eq(3)").children().eq(0).attr("id", "StStartRoad" + flag);
112 $("#" + rowId + " td:eq(3)").children().eq(1).attr("id", "EndRoad" + flag);
113 //每插入一行，flag自增一次
114 flag++;
115 }
116
117 //-----------------删除一行，根据行ID删除-start--------
118
119 function deleteSelectedRow(rowID) {
120 if (confirm("确定删除该行吗？")) {
121 $("#" + rowID).remove();
122 }
123 }
124 //-----------------获取表单中的值----start--------------
125
126 function GetValue() {
127 var value = "";
128 $("#orderTable tr").each(function(i) {
129 if (i >= 1) {
130 $(this).children().each(function(j) {
131 if ($("#orderTable tr").eq(i).children().length - 1 != j) {
132 value += $(this).children().eq(0).val() + "," //获取每个单元格里的第一个控件的值
133 if ($(this).children().length > 1) {
134 value += $(this).children().eq(1).val() + "," //如果单元格里有两个控件，获取第二个控件的值
135 }
136 }
137 });
138 value = value.substr(0, value.length - 1) + "#"; //每个单元格的数据以“，”分割，每行数据以“#”号分割
139 }
140 });
141 value = value.substr(0, value.length);
142 ReceiveValue(value);
143 // $("#formvalue").val(value);
144 // $("formvalue").submit();
145 }
146 //-------------------接收表单中的值-----------------------------
147
148 function ReceiveValue(str) {
149 var Str = str.split('#');
150 if (Str[0] != "") {
151 for (var i = 0; i < Str.length - 1; i++) {
152 var value = Str[i].split(',');
153 var dept = value[0];
154 var street = value[1]
155 var section = value[2];
156 var Broad = value[3];
157 var Eroad = value[4];
158 insertTable(dept, street, section, Broad, Eroad);
159 $("input[type='text']").val("");
160 $("select[name='UrbanDepNo']").val("0");
161 }
162 }
163 }
164
165 //---------------将表单中的数据添加到新表中---------------------
166
167 function insertTable(dept, street, section, Broad, Eroad) {
168 var department = "";
169 switch (dept) {
170 case "1":
171 department = "三林城管署";
172 break;
173 case "2":
174 department = "港城城管署";
175 break;
176 case "3":
177 department = "惠南城管署";
178 break;
179 case "4":
180 department = "金桥城管署";
181 break;
182 case "5":
183 department = "陆家嘴城管办";
184 break;
185 case "6":
186 department = "川沙城管署";
187 break;
188 default:
189 break;
190 }
191
192 //将接收到数据添加到新表TableInfo中。
193 $('#TableInfo').append("<tr id=" + index + "><td align='center'>" + department + "</td> <td align='center'>" + street + "</td><td align='center'>" + section + "</td> <td align='center'>" + Broad + "-" + Eroad + "</td> <td align='center'><a href='#' onclick='deltr(" + index + ")'>删 除</a></td></tr>");
194 index++;
195 }
196
197 //----------新表中的删除方法-----------
198
199 function deltr(index) {
200 if (confirm("确定删除吗?")) {
201 $("tr[id='" + index + "']").remove();
202 }
203 }
204 </script>
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
浙公网安备 33010602011771号