使用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 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
JavaScript字符串对象
Jan 14 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
react的hooks的用法详解
Oct 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编程语言开发动态WAP页面
2006/10/09 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
Vue核心概念Action的总结
2019/01/18 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Sanic框架Cookies操作示例
2018/07/17 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
django admin 添加自定义链接方式
2020/03/11 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
实习单位接收函模板
2014/01/10 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
2014年卫生工作总结
2014/11/27 职场文书
运动员入场词
2015/07/18 职场文书
交通安全主题班会
2015/08/12 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
Go语言安装并操作redis的go-redis库
2022/04/14 Golang