基于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 相关文章推荐
js中typeof的用法汇总
Dec 12 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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
资料注册后发信小技巧
2006/10/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python Trie树实现字典排序
2014/03/28 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
python中time包实例详解
2021/02/02 Python
财务方面个人工作的自我评价
2013/12/28 职场文书
学子宴答谢词
2014/01/25 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
社会公德演讲稿
2014/05/20 职场文书
食品流通安全承诺书
2014/05/22 职场文书
企业标语大全
2014/07/01 职场文书
个人工作表现评价材料
2014/09/21 职场文书
爱情保证书
2015/01/17 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
python在package下继续嵌套一个package
2022/04/14 Python