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循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
随机推荐
- NOI2018Day1T1 归程 并查集 kruskal kruskal重构树 倍增表 Dijkstra
原文链接https://www.cnblogs.com/zhouzhendong/p/NOI2018Day1T1.html 题目传送门 - 洛谷P4768 题意 给定一个无向连通图,有 $n$ 个点 ...
- 分解数据表(将一个datatable按数据量分隔成多个table)
/// <summary> /// 分解数据表 /// </summary> /// <param name="originalTab">需要分 ...
- 查出了a表,然后对a表进行自查询,a表的别名t1,t2如同两张表,因为t1,t2查询的条件不一样,真的如同两张表,关联两张表,可以将两行或者多行数据合并成一行,不必使用wm_concat()函数。为了将t2表的数据全部查出来使用了右连接。
with a as( select nsr.zgswj_dm, count(distinct nsr.djxh) cnt, 1 z from hx_fp.fp_ly fp, hx_dj.dj_nsrx ...
- 开启vue源码的解析攻略---认识flow
javascript 是动态类型的代码,有很多的写法很不容易报错,想引入静态类型检查的flow,之前做项目的时候用的typascript的,看的大概的写法和 typescript 类似,因为规范避免了 ...
- Spring:获取容器中的Bean
某些情况下我们要获取 IOC 容器中指定注解.类型.名字的 Bean 要获取 IOC 容器中指定条件的 Bean 可以通过 ApplicationContext 相应的方法 @Autowired pr ...
- linux 硬盘分区与格式化挂载 (二)
1. 文件系统的挂载与卸载(详见linux系统管理P406)1) 掌握挂载的定义:挂载指将一个设备(通常是存储设备)挂接到一个已存在的目录上.2) 掌握mount命令的功能:实现文件系统的挂载.3) ...
- Alpha(3/10)
鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...
- angular笔记_1
第一个angular文件<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js&q ...
- 编辑datagridview单元格
以这3种为例,最简单的是第三种,直接让单元格处于可编辑状态,当完成编辑后触发CellEndEdit事件,最后对输入的数据进行处理. private DateTimePicker dtp = new D ...
- BZOJ1500: [NOI2005]维修数列 [splay序列操作]【学习笔记】
以前写过这道题了,但我把以前的内容删掉了,因为现在感觉没法看 重写! 题意: 维护一个数列,支持插入一段数,删除一段数,修改一段数,翻转一段数,查询区间和,区间最大子序列 splay序列操作裸题 需要 ...