Js实现Table动态添加一行的小例子
<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>
Js实现Table动态添加一行的小例子的更多相关文章
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- 利用jquery给指定的table动态添加一行、删除一行,复制,值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- ASP.NET给Table动态添加删除行,并且得到控件的值
ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
随机推荐
- P1441 砝码称重 DFS回溯+DP
题目描述 现有n个砝码,重量分别为a1,a2,a3,……,an,在去掉m个砝码后,问最多能称量出多少不同的重量(不包括0). 请注意,砝码只能放在其中一边. 输入输出格式 输入格式: 输入文件weig ...
- 07. Matplotlib 3 |表格样式| 显示控制
1.表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建:① Styler.applymap ...
- poj 1966(求点连通度,边连通度的一类方法)
题目链接:http://poj.org/problem?id=1966 思路:从网上找了一下大牛对于这类问题的总结:图的连通度问题是指:在图中删去部分元素(点或边),使得图中指定的两个点s和t不连通 ...
- HDU 1257 最少拦截系统 【贪心】
<题目链接> 题目大意: 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度 ...
- python数据结构之quick_sort
Quick sort , also known as partition-exchange sort, divides the data to be sorted into two separate ...
- SQL 2016 正式版 安装过程
1.点击全新安装 2.接着就是下一步,下一步... 3.选择你要安装的功能 [可以利用PolyBase,使用标准TSQL查询hadoop数据,但这里我不需要装] 4.设置排序规则 5.设置登录用 ...
- Xamarin Essentials教程检查网络连通性Connectivity
Xamarin Essentials教程检查网络连通性Connectivity 网络连通性其实就是检测当前设备有没有连接网络.网络连通性在很多与网络相关的应用程序中会使用到.在Xamarin中如果 ...
- Android异步消息传递机制源码分析
1.Android异步消息传递机制有以下两个方式:(异步消息传递来解决线程通信问题) handler 和 AsyncTask 2.handler官方解释的用途: 1).定时任务:通过handler.p ...
- 潭州课堂25班:Ph201805201 django 项目 第十七课 用户登录,登出实现 (课堂笔记)
登录,校验: 1,判断用户名输入是否为空, 2,判断用户名密码是否匹配, 3,记住我的功能,:将用户信息记到 session 中 请求方式: POST 在视图中: # 1,创建类# 2,获取前台参数# ...
- 潭州课堂25班:Ph201805201 django 项目 第四课 项目搭建 课堂笔记)
创建一用户,授予对这个 myblog 库的所有表的权限(.*),在任何 ip 地址中访问(@“%”), 刷新: 退出,用新创建的用户登录,并进入这个库, 在昨天创建的项目中,配置文件中 为了数据库的案 ...