用JQUERY增删元素的代码

用JQUERY增删元素
JQuery有增加和删除元素的方法。
主要分为内部插入，外部插入，包裹，替换，删除。
内部插入主要方法：
append(content) 向每个匹配的元素内部追加内容。
prepend(content) 向每个匹配的元素内部前置内容。
外部插入：
after(content) 在每个匹配的元素之后插入内容。
before(content) 在每个匹配的元素之前插入内容。
删除：
empty() 删除匹配的元素集合中所有的子节点。
remove([expr]) 从DOM中删除所有匹配的元素。

下面的例子是点击增加按钮表格就会在最后一行插入新的一行
再点击删除按钮删除最后一行




代码如下:

<!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>

赞 (0)

相关推荐

  • 用JQUERY增删元素的代码

    用JQUERY增删元素的代码

    用JQUERY增删元素JQuery有增加和删除元素的方法.主要分为内部插入,外部插入,包裹,替换,删除.内部插入主要方法:append(content) 向每个匹配的元素内部追加内容.prepend(content) 向每个匹配的元素内部前置内容.外部插入:after(content) 在每个匹配的元素之后插入内容.before(content) 在每个匹配的元素之前插入内容.删除:empty() 删除匹配的元素集合中所有的子节点.remove([expr]) 从DOM中删除所有匹配的元素. 下

  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    jQuery判断元素是否显示 是否隐藏的简单实现代码 var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 if(!node.is(':visible')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visib

  • Jquery同辈元素选中/未选中效果的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server"&

  • jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) <script type="text/javascript" src="script/jquery-1.8.3.js"></script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段

  • jquery层级选择器(匹配父元素下的子元素实现代码)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>层级 </title&g

  • jQuery fadeOut 异步实例代码详解

    定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id

  • jquery中子元素和后代元素的区别示例介绍

    今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别 后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码 代码如下: <div>This is <strong>very</strong> important

  • jQuery检查元素存在性(推荐)

    javascript检查元素存在性:即使这个元素被删除了,也不担心javascript代码报错: jquery检查元素存在性: 代码如下: if(!document.getElementById("preview")) return false; jquery $("#preview")获取的永远是对象,即使网页上没有此元素. 不能使用以下代码: if($("#preview"){ //do something } 因此要用jquery检查某个元

  • jQuery判断元素上是否绑定了指定事件的方法

    本文实例讲述了jQuery判断元素上是否绑定了指定事件的方法.分享给大家供大家参考.具体如下: 例如下面的代码可以判断id=testdiv的元素是否绑定的click事件,这个判断只针对jQuery绑定的事件有效,普通JS的事件绑定无效. //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#testdiv").data("events"); if( $events &&

  • jQuery给元素添加样式的方法详解

    本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

随机推荐