使用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动态添加option示例
Dec 30 Javascript
jquery分割字符串的方法
Jun 24 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
一个基于PDO的数据库操作类
2011/03/24 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python中random模块用法实例分析
2015/05/19 Python
Python中pygame安装方法图文详解
2015/11/11 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
老师对学生的寄语
2014/04/09 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS