使用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 相关文章推荐
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
js实现简单五子棋游戏
May 28 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
ES6 解构赋值的原理及运用
May 25 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Keras搭建自编码器操作
2020/07/03 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
创立科技Java面试题
2015/11/29 面试题
团支部推优材料
2014/05/21 职场文书
2014年质检员工作总结
2014/11/18 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python