基于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 相关文章推荐
DOM精简教程
Oct 03 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
获取python文件扩展名和文件名方法
2018/02/02 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python如何实现线程间通信
2020/07/30 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
Python 多进程原理及实现
2020/12/21 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
2013年军训通讯稿
2014/02/05 职场文书
工作迟到检讨书
2014/02/21 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
匿名信格式范文
2015/05/27 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS