用JQUERY增删元素的代码


Posted in Javascript onFebruary 14, 2012

用JQUERY增删元素
JQuery有增加和删除元素的方法。
主要分为内部插入,外部插入,包裹,替换,删除。
内部插入主要方法:
append(content) 向每个匹配的元素内部追加内容。
prepend(content) 向每个匹配的元素内部前置内容。
外部插入:
after(content) 在每个匹配的元素之后插入内容。
before(content) 在每个匹配的元素之前插入内容。
删除:
empty() 删除匹配的元素集合中所有的子节点。
remove([expr]) 从DOM中删除所有匹配的元素。

下面的例子是点击增加按钮表格就会在最后一行插入新的一行
再点击删除按钮删除最后一行

用JQUERY增删元素的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>表格元素增删</title> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
body{ font-size:12px;} 
</style> 
<script type="text/javascript"> 
/* 添加预测 */ 
function add_tr() { 
$("#table1").append("<tr>" + $("#table1 tr").eq(0).html() + "</tr>"); 
} 
/* 删除预测 */ 
function remove_tr() { 
//alert($("#table1 tr").last().html()); 
if ($("#table1 tr").size() > 1) { 
$("#table1 tr:last-child").remove(); 
} 
else 
alert("这是最后一行,无法再删除"); 
} 
</script> 
</head> 
<body align='center'> 
<center> 
<table id='table1'> 
<tr> 
<td width='150'>第一格</td> 
<td width='250'><input type='text'/></td> 
</tr> 
</table> 
<br/> 
<input type='button' value='增加一行' onclick='add_tr()' /> 
<input type='button' value='删除最后一行' onclick='remove_tr()' /> 
</center> 
</body> 
</html>
Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 #Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 #Javascript
js 金额文本框实现代码
Feb 14 #Javascript
jQuery UI Autocomplete 体验分享
Feb 14 #Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 #Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 #Javascript
情人节之礼 js项链效果
Feb 13 #Javascript
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JavaScript的Function详细
2006/11/14 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
不要用强制方法杀掉python线程
2017/02/26 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
查看python下OpenCV版本的方法
2018/08/03 Python
浅谈python常用程序算法
2019/03/22 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python中sys模块是做什么用的
2020/08/16 Python
聊聊python中的循环遍历
2020/09/07 Python
恶意软件的定义
2014/11/12 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技