JQuery动态添加和删除表格行的方法


Posted in Javascript onMarch 09, 2015

本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下:

昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery。用它实现起来还真的是很方便,这个是我用到我们平台的一个方法。

//记录添加行数

var areaCount=1;

//记录实际表格行数

var rowCount=1;

//删除模板html

var delRowTemplete = "<td><a href='javascript:void(0);' class='content_del' onclick='deleteBatchRow(this)'>删除</a></td>";

//表格行模板

var addRowTemplete= "";

$(function(){

//首先取出需要克隆的模板,模板行<tr>id为rowTemplete_0

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++; rowCount++;

}

//删除行

function deleteBatchRow(obj){

if(rowCount>1) {

$(obj).parents("tr").remove(); 

rowCount--;

} else alert("至少保留一行");//如果全部删除了,那么也就没有办法再添加行了,模板行也被删了呀

}

//取得条数

function getAreaCount(){

return rowCount;

}

后台使用的也是比较容易的,在FormBean里面定义数组变量来get和set,很方便的。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
在javascript中关于节点内容加强
Apr 11 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
Python脚本后台运行的几种方式
Mar 09 #Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 #Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 #Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 #Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 #Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 #Javascript
jQuery随机密码生成的方法
Mar 09 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP array_push 数组函数
2009/12/26 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
Node.js事件驱动
2015/06/18 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python lxml中etree的简单应用
2019/05/10 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
python SVD压缩图像的实现代码
2019/11/05 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
关于python中导入文件到list的问题
2020/10/31 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
服装销售人员求职自我评价
2013/09/26 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年设计师工作总结
2014/11/25 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers