用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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
Javascript 事件流和事件绑定
Jul 16 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
JS中this的4种绑定规则详解
Feb 04 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桌面中心(一) 创建数据库
2007/03/11 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
Python将图片转换为字符画的方法
2020/06/16 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python最长回文串算法
2018/06/04 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
财务管理专业应届毕业生求职信
2013/09/22 职场文书
婚礼主持结束词
2014/03/13 职场文书
询价采购方案
2014/06/09 职场文书
公司周年庆活动方案
2014/08/25 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
教师读书活动心得体会
2016/01/14 职场文书