使用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 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
微信小程序 教程之事件
Oct 18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue实现分页组件
Jun 16 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
vue实现简单学生信息管理
May 30 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
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
学生发电厂实习自我鉴定
2013/09/22 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
工程催款通知书
2015/04/17 职场文书
理想国读书笔记
2015/06/25 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Golang jwt身份认证
2022/04/20 Golang