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=" 20%;">申报部门</th> 8 <th style=" 20%;">街镇</th> 9 <th style=" 20%;">路段名称</th> 10 <th style=" 30%;">起止路名</th> 11 <th>操作</th> 12 </tr> 13 </thead> 14 <tr id="row0"> 15 <td> 16 <select id="UrbanDepNo0" name="UrbanDepNo" style="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="90%"/> 27 28 </td> 29 <td> 30 <input type="text" id="RoadSectionName0" name="RoadSectionName" style="90%"/> 31 </td> 32 <td> 33 <input type="text" id="StStartRoad0" name="StStartRoad" style="45%"/>-- 34 <input type="text" id="EndRoadName0" name="EndRoadName" style="45%"/> 35 </td> 36 <td> 37 <input type="button" name="delete" value="删 除" style="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="80px" onclick="insertNewRow()" />   45 <input type="button" value=" 保 存 " style="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=' 20%'>" + firstCell + "</td>" + "<td style=' 20%'>" + secondCell + "</td>" + "<td style=' 20%'>" + thirdCell + "</td>" + "<td style=' 30%'>" + fourthCell + "</td>" + "<td><input type='button' name='delete' value='删除' style='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