基于jquery的实现简单的表格中增加或删除下一行


Posted in Javascript onAugust 01, 2010

代码如下:
html

<div> 
<table> 
<tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> 
<tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> 
<tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> 
</table> 
</div>

jquery代码:
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
ModifyClick(); 
}); 
function ModifyClick() { 
$("table tr input[type='button'] ").each(function () { 
$(this).unbind("click"); 
$(this).bind("click", function () { 
if ($(this).val() == "添加下一行") { 
$(this).parent().parent().after("<tr><td>Add</td><td><input onclick=\"ModifyClick()\" type=button value=\"添加下一行\" /><input onclick=\"ModifyClick()\" type=button value=\"删除下一行\" /></td></tr>"); 
} 
if ($(this).val() == "删除下一行") { 
$(this).parent().parent().next().eq(0).remove(); 
} 
}); 
}); 
} 
</script>
Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 #Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
动态调用CSS文件的JS代码
Jul 29 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PHP里的中文变量说明
2011/07/23 PHP
Admin generator, filters and I18n
2011/10/06 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
学生宿舍管理制度
2014/01/30 职场文书
平安工地建设方案
2014/05/06 职场文书
交通安全责任书范本
2014/07/24 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
工程服务质量承诺书
2015/04/29 职场文书
详解Python函数print用法
2021/06/18 Python