基于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实现半透明遮罩层效果具体代码
Jun 06 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
在python中pandas的series合并方法
2018/11/12 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
如何理解Python中包的引入
2020/05/29 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
大学生秋游活动方案
2014/02/17 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
委托书范本
2014/09/13 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
植树节新闻稿
2015/07/17 职场文书
设置IIS Express并发数
2022/07/07 Servers