基于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 22 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Mac下安装vue
Apr 11 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
浅谈一种让小程序支持JSX语法的新思路
Jun 16 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
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
图片完美缩放
2006/09/07 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python进程间通信之共享内存详解
2017/10/30 Python
Python中类的初始化特殊方法
2017/12/01 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python 的topk算法实例
2020/04/02 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
小学生期末评语
2014/04/21 职场文书
1亿有多大教学反思
2014/05/01 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书