使用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 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
php header函数的常用http头设置
2015/06/25 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python写入已存在的excel数据实例
2018/05/03 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python使用knn实现特征向量分类
2018/12/26 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python3使用GUI统计代码量
2019/09/18 Python
一文读懂Python 枚举
2020/08/25 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
科学发展观标语
2014/10/08 职场文书
2014年团委工作总结
2014/11/13 职场文书
给医院的感谢信
2015/01/21 职场文书
小学校长个人总结
2015/03/03 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
个人更名证明
2015/06/23 职场文书
严以用权学习心得体会
2016/01/12 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python