用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 相关文章推荐
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
jquery实现网页查找功能示例分享
Feb 12 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jquery中交替点击事件的实现代码
2014/02/14 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
行政文秘岗位职责范本
2014/02/10 职场文书
小学家长评语大全
2014/04/16 职场文书
2015年质检工作总结
2015/05/04 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android