使用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打印iframe内容示例代码
Aug 20 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
ES7之Async/await的使用详解
Mar 28 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
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
对xmlHttp对象的理解
2011/01/17 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
详解jQuery事件
2017/01/13 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Django实现文件上传和下载功能
2019/10/06 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
网络维护管理员的自我评价分享
2013/11/11 职场文书
大学生入党思想汇报
2014/01/01 职场文书
元旦标语大全
2014/10/09 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
护士年终个人总结
2015/02/13 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
不同意离婚答辩状
2015/05/22 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android