基于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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
JS字符串处理实例代码
Aug 05 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
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代码
2010/08/08 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
利用php生成验证码
2017/02/23 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python中if有多个条件处理方法
2020/02/26 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python 实现集合Set的示例
2020/12/21 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
jQuery treeview树形结构应用
2021/03/24 jQuery
如何进行有效的自我评价
2013/09/27 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
领班岗位职责范文
2014/02/06 职场文书
面试必备的求职信
2014/05/25 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
计生个人工作总结
2015/02/28 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript