基于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.ajax)
Nov 19 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
PHP7 list() 函数修改
2021/03/09 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
Vue基础配置讲解
2019/11/29 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python实现随机漫步算法
2018/08/27 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
班组安全员工作职责
2014/02/01 职场文书
化学教学随笔感言
2014/02/19 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书