用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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
浅析JS运动
Dec 28 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
简单了解JS打开url的方法
Feb 21 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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.ini中文版(2)
2006/10/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
js实现小时钟效果
2020/03/25 Javascript
python列表去重的二种方法
2014/02/14 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python中remove函数的踩坑记录
2021/01/04 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
临床医学大学生求职信
2013/09/28 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
单位在职证明范本
2014/01/09 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
重点工程汇报材料
2014/08/27 职场文书
学习退步检讨书
2014/09/28 职场文书
2014年学生工作总结
2014/11/20 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript