基于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 DOM事件模型的两件事
Jul 22 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
javascript去除空格方法小结
May 21 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
简述python Scrapy框架
2020/08/17 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
总经理司机岗位职责
2014/02/06 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
2014年统计工作总结
2014/11/21 职场文书
个人德育工作总结
2015/03/05 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python