用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 相关文章推荐
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue中activated的用法
Jan 03 Vue.js
vue elementUI表格控制对应列
Apr 13 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中去掉字符串首尾空格的方法
2012/05/19 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python中logging实例讲解
2019/01/17 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
党校自我鉴定范文
2013/10/02 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
自主招生自荐信指南
2014/02/04 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书