基于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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript Excel操作知识点
Apr 24 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
JSON相关知识汇总
2015/07/03 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
python模拟Django框架实例
2016/05/17 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
电大物流学生的自我评价
2013/10/25 职场文书
和平主题的演讲稿
2014/01/12 职场文书
化学教学随笔感言
2014/02/19 职场文书
班级寄语大全
2014/04/10 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2015年预算员工作总结
2015/05/14 职场文书
初三毕业感言
2015/07/31 职场文书
银行工作心得体会范文
2016/01/23 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript