基于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 相关文章推荐
jquery parent和parents的区别分析
Oct 02 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
JS正则表达式验证密码强度
Mar 18 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 文件上传类代码
2011/08/06 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PDO::exec讲解
2019/01/28 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
.net面试题
2016/09/17 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
《争吵》教学反思
2014/02/15 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
读书活动总结
2014/04/28 职场文书
毕业证代领委托书
2014/09/26 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
实施意见格式范本
2015/06/05 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2016年父亲节寄语
2015/12/04 职场文书
高中生物教学反思
2016/02/20 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书