<form id="form1" runat="server">
<div>
<table id="orderTable" border='' cellpadding="" cellspacing="" style="border-collapse: collapse; border-color:#C0C0C0;" rules="none" width="80%" align="center">
<thead>
<tr>
<th style="width: 20%;">申报部门</th>
<th style="width: 20%;">街镇</th>
<th style="width: 20%;">路段名称</th>
<th style="width: 30%;">起止路名</th>
<th>操作</th>
</tr>
</thead>
<tr id="row0">
<td>
<select id="UrbanDepNo0" name="UrbanDepNo" style="width:90%">
<option value="">三林城管署</option>
<option value="">港城城管署</option>
<option value="">惠南城管署</option>
<option value="">金桥城管署</option>
<option value="">陆家嘴城管办</option>
<option value="">川沙城管署</option>
</select>
</td>
<td>
<input type="text" id="LocNo0" name="LocNo" style="width:90%"/> </td>
<td>
<input type="text" id="RoadSectionName0" name="RoadSectionName" style="width:90%"/>
</td>
<td>
<input type="text" id="StStartRoad0" name="StStartRoad" style="width:45%"/>--
<input type="text" id="EndRoadName0" name="EndRoadName" style="width:45%"/>
</td>
<td>
<input type="button" name="delete" value="删 除" style="width:80px" onclick="deleteSelectedRow(0)" /> </td>
</tr>
<tr>
<td align="center" colspan="">
<br />
<input type="button" name="insert" value="增加一行" style="width:80px" onclick="insertNewRow()" />  
<input type="button" value=" 保 存 " style="width:80px" onclick="GetValue()" />
</td>
</tr>
</table>
</div>
<div style="MARGIN: 40px auto;">
<table id="TableInfo" border='' cellpadding="" cellspacing="" style="border-collapse: collapse; border-color:#C0C0C0;" width="80%" align="center">
<tr>
<td align="center">
申报部门
</td>
<td align="center">
街镇
</td>
<td align="center">
路段名称
</td>
<td align="center">
起止路名
</td>
<td align="center">
操作
</td>
</tr>
</table>
</div>
</form> <script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language='javascript'>
//声明全局变量
var formvalue = "";
var flag = ;
var index = ;
var firstCell = "";
var secondCell = "";
var thirdCell = "";
var fourthCell = ""; $(function() {
//初始化第一行
firstCell = $("#row0 td:eq(0)").html();
secondCell = $("#row0 td:eq(1)").html();
thirdCell = $("#row0 td:eq(2)").html();
fourthCell = $("#row0 td:eq(3)").html();
}); //-----------------新增一行-----------start--------------- function insertNewRow() {
//获取表格有多少行
var rowLength = $("#orderTable tr").length;
//这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。
var rowId = "row" + flag; //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用 after
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>";
//这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引
$("#orderTable tr:eq(" + (rowLength - ) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面
//为新添加的行里面的控件添加新的id属性。
$("#" + rowId + " td:eq(0)").children().eq().attr("id", "UrbanDepNo" + flag);
$("#" + rowId + " td:eq(1)").children().eq().attr("id", "LocNo" + flag);
$("#" + rowId + " td:eq(2)").children().eq().attr("id", "RoadSectionName" + flag);
$("#" + rowId + " td:eq(3)").children().eq().attr("id", "StStartRoad" + flag);
$("#" + rowId + " td:eq(3)").children().eq().attr("id", "EndRoad" + flag);
//每插入一行，flag自增一次
flag++;
} //-----------------删除一行，根据行ID删除-start-------- function deleteSelectedRow(rowID) {
if (confirm("确定删除该行吗？")) {
$("#" + rowID).remove();
}
}
//-----------------获取表单中的值----start-------------- function GetValue() {
var value = "";
$("#orderTable tr").each(function(i) {
if (i >= ) {
$(this).children().each(function(j) {
if ($("#orderTable tr").eq(i).children().length - != j) {
value += $(this).children().eq().val() + "," //获取每个单元格里的第一个控件的值
if ($(this).children().length > ) {
value += $(this).children().eq().val() + "," //如果单元格里有两个控件，获取第二个控件的值
}
}
});
value = value.substr(, value.length - ) + "#"; //每个单元格的数据以“，”分割，每行数据以“#”号分割
}
});
value = value.substr(, value.length);
ReceiveValue(value);
// $("#formvalue").val(value);
// $("formvalue").submit();
}
//-------------------接收表单中的值----------------------------- function ReceiveValue(str) {
var Str = str.split('#');
if (Str[] != "") {
for (var i = ; i < Str.length - ; i++) {
var value = Str[i].split(',');
var dept = value[];
var street = value[]
var section = value[];
var Broad = value[];
var Eroad = value[];
insertTable(dept, street, section, Broad, Eroad);
$("input[type='text']").val("");
$("select[name='UrbanDepNo']").val("");
}
}
} //---------------将表单中的数据添加到新表中--------------------- function insertTable(dept, street, section, Broad, Eroad) {
var department = "";
switch (dept) {
case "":
department = "三林城管署";
break;
case "":
department = "港城城管署";
break;
case "":
department = "惠南城管署";
break;
case "":
department = "金桥城管署";
break;
case "":
department = "陆家嘴城管办";
break;
case "":
department = "川沙城管署";
break;
default:
break;
} //将接收到数据添加到新表TableInfo中。
$('#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>");
index++;
} //----------新表中的删除方法----------- function deltr(index) {
if (confirm("确定删除吗?")) {
$("tr[id='" + index + "']").remove();
}
}
</script>
相关推荐
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
