使用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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
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 调用远程url的六种方法小结
2009/11/02 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php实现中文转数字
2016/02/18 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
基本DOM节点操作
2017/01/17 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python在线运行代码助手
2016/07/15 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Django中间件基础用法详解
2019/07/18 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python实现自动访问网页的例子
2020/02/21 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
如何进行Linux分区优化
2016/09/13 面试题
班长岗位职责
2013/11/10 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
职专应届生求职信
2013/11/16 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
董事长助理岗位职责
2014/02/18 职场文书
毕业生就业意向书
2014/04/01 职场文书
兴趣小组活动总结
2014/05/05 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书