用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 相关文章推荐
动态为事件添加js代码示例
Feb 15 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
修改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
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
用js重建星际争霸
2006/12/22 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JS中操作JSON总结
2020/12/06 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
详解python之协程gevent模块
2018/06/14 Python
python处理csv中的空值方法
2018/06/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
单位病假条范文
2015/08/17 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
python内置模块之上下文管理contextlib
2022/06/14 Python