使用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与CSS复习(二)
Jun 29 Javascript
javascript最常用与实用的创建类的代码
Aug 12 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
vue的$http的get请求要加上params操作
Nov 12 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&amp;&amp;mysql)三
2006/10/09 PHP
php中fsockopen用法实例
2015/01/05 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
python生成lmdb格式的文件实例
2018/11/08 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
简单了解python变量的作用域
2019/07/30 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
python创建学生成绩管理系统
2019/11/22 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
销售会计岗位职责
2014/03/15 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python