使用jquery为table动态添加行的实现代码


Posted in Javascript onMarch 30, 2011

这里,用的jquery来做的。关键代码如下:

//添加???校 
function AddRow(){ 
var vTb=$("#TbData");//得到表格ID=TbData的jquery对象 
//所有的数据行有一个.CaseRow的Class,得到数据行的大小 
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行 
var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行数据 
var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone 
vTrClone[0].id="trDataRow"+vNum;//?置 第一??Id?楫?前?取索引;防止重?添加多??ID??rDataRow1的???校灰淮翁砑右??; 
vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方 
}

该方法,主要运用了jquery的clone函数,克隆一个table的行副本。然后添加给原来的table。
删除方法关键Code:
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行; 
if(vNum<=2) 
{ 
alert('请至少留一行'); 
return; 
} 
var vbtnDel=$(this);//得到点击的按钮对象 
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象; 
if(vTr.attr("id")=="trDataRow1") 
{ 
alert('第一行不能删除!'); //第一行是克隆的基础,不能删除 
return; 
}else{ 
vTr.remove(); 
}
Javascript 相关文章推荐
JavaScript arguments 多参传值函数
Oct 24 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jQuery中extend函数详解
Jul 13 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 #Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 #Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 #Javascript
使用隐藏的new来创建对象
Mar 29 #Javascript
myeclipse安装jQuery插件的方法
Mar 29 #Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 #Javascript
基于jQuery的动态表格插件
Mar 28 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
谈谈PHP语法(2)
2006/10/09 PHP
PHP 选项及相关信息函数库
2006/12/04 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
python读取word文档的方法
2015/05/09 Python
python连接字符串的方法小结
2015/07/13 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python selenium的基本使用方法分析
2019/12/21 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
学历证明样本
2015/06/16 职场文书