给表格添加删除一行的方法在网上也有比较多的例子,今天把我做的也拿出来给大家分享一下,用的是jquery的方法非常简单(附带了一张效果图):
//记录行数
var areaCount=1;
//删除链接模板html
var delRowTemplete = "<td><a href='javascript:void(0);' class='content_del' onclick='deleteBatchRow(this)'>删除</a></td>";
var addRowTemplete= "";
$(function(){
//首先取出需要克隆的模板
addRowTemplete= $("#rowTemplete_0").html();
});
//增加行
function addBatchRow(type){
var templete = $("<tr id='rowTemplete_"+areaCount+"'></tr>");
//递增序号,替换掉tr或者td中存在[0]、_0或者(0)防止id相同,这么设计主要是为了后台取值时方便
templete = templete.append(addRowTemplete.replace(/\[0\]/g,"["+areaCount+"]").replace(/_0/g,"_"+areaCount).
replace("processStat(\"0\")","processStat("+areaCount+")"));
//找到最后一条存在的行,在其后拼接一行
var flag = false;
for(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_"+i).length>0){ $("#rowTemplete_"+i).after(templete.append(delRowTemplete));
break;}
}
//计数加一
areaCount++;
}
//删除行
function deleteBatchRow(obj){
$(obj).parents("tr").remove();
}
//取得条数
function getAreaCount(){
return areaCount;
}
我觉得如果在页面上进行了添加删除行操作,后台可能需要把这些行的值取出来,告诉大家一个比较好用的方法:定义一个model类把需要传到后台的值,都定义在这个类中作为它的属性,然后在form中定义一个这个类的list于是页面上我们可以使用:“list名[0].属性”,这样我们在后台取值的时候就非常方便了
- 大小: 15.4 KB
分享到:
相关推荐
本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
在一些系统使用中,我们常会遇到需要添加或删除行的要求,本例可以快速简洁地实现这功能(里面的返回需改成javascript:history.go(-1))
又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能,接下来通过代码实例给大家介绍JavaScript实现动态...
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
jQuery表格编辑添加删除行插件是一款表格插件,默认设置json数据动态生成表格。
jQuery表格编辑添加删除行代码是一款适用于手机端的编辑表格代码。
这个表格有漂亮的样式,可以隔行换色,单元格可以高亮显示,可以添加一行表格,删除本行,还可以排序,表格中有下拉框、checkbox等空间,挺好的功能。 但是要在IE8上运行,其他浏览器是不支持的,文件为.html格式,...
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
实现页面创建表格,和删除指定列、行单元格功能。利用JavaScript动态创建表格,可根据用户的使用需求动态添加指定列数、行数,删除指定列数、行数。删除成功或不成功时,会反馈给用户一个弹框提示,增强用户体验感。
第一列 </th> <th align="center"> 第二列 </th> <th align="center"> 第三列 </th> <th align="center"> 第四列 </th> <th align="center"> 第五列 </th> ...
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码,供大家参考,具体内容如下 动态生成一个带删除行功能的表格: 实现思路 1、获取表格元素 2、获取要填充的数据,一般是从数据库取数据,也...
内容索引:脚本资源,jQuery,动态删除 jQuery 动态添加或删除表格行特效,每点击一次添加,会添加一个表格单元格,点击删除会删掉所有行,基于jQuery插件完成,想研究的朋友下载一看。
NULL 博文链接:https://mousepc.iteye.com/blog/969497
功能包括:表格添加一行,表格删除一行,表格遍历取值等。 点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响。删除或者添加,每行的的编号都会自动变化,套餐和价格是<...
Layui表格添加行删除保存代码是一款可用于对表格数据快速维护,展示修改功能,灵活自如。
主要介绍了JavaScript实现动态添加,删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下