使用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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
javascript模拟命名空间
Apr 17 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 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 等比例缩放图片详解及实例代码
2016/09/18 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
python从sqlite读取并显示数据的方法
2015/05/08 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python如何使用unittest测试接口
2018/04/04 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python3实现转换Image图片格式
2018/06/21 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
初中军训感言
2015/08/01 职场文书
导游词之南京夫子庙
2019/12/09 职场文书