使用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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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数组函数
2008/08/18 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php文件下载处理方法分析
2015/04/22 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
PHP PDO操作总结
2014/11/17 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
零基础学python应该从哪里入手
2020/08/11 Python
厂长岗位职责
2014/02/19 职场文书
住房租房协议书
2014/08/20 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014年小学工作总结
2014/11/26 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
导游词之贵州织金洞
2019/10/12 职场文书