基于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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
实测jquery data()如何存值
Aug 18 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 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
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python如何判断IP地址合法性
2020/04/05 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
中软国际Java程序员机试题
2012/08/19 面试题
应届生法律顾问求职信
2013/11/19 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
小学生秋游活动方案
2014/02/23 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
如何用python绘制雷达图
2021/04/24 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
SQL语句多表联合查询的方法示例
2022/04/18 MySQL