<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("#addOneRow").click(function(){
    var tempTr=$("tr:first").clone(true);
    $("tr:last").after(tempTr);
    $("tr:last > td > #name").val("");
    $("tr:last > td > #address").val("");
  });
  $(".delOneRow").click(function() {
    if ($("tr").length < 2) {
      alert("至少保留一行!");
    }
    else{
      if (confirm("确认删除?")) {
        $(this).parent().parent().remove();
      }
    }
  });
});
</script>
</head>
<body>
<table border="1">
  <tr>
    <td>姓名:</td>
    <td><input type="text" id="name" name="name" /></td>
    <td>地址:</td>
    <td><input type="text" id="address" name="address" /></td>
    <td><input type="button" class="delOneRow" value="删除" /></td>
  </tr>
</table>
<input type="button" id="addOneRow" value="添加一行" />
</body>
</html>

上面你的代码实现添加或者删除行的功能，下面介绍一下它的实现过程。

一.代码注释：

（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.$("#addOneRow").click(function(){})，为添加按钮注册click事件处理函数。

（3）.var tempTr=$("tr:first").clone(true)，克隆第一行的数据，采用深度克隆，具体可以参阅下面的相关阅读。

（4）.$("tr:last").after(tempTr)，在最后一行插入克隆的行。

（5）.$("tr:last > td > #name").val("")，将最后一个tr行的用户名文本框的值设置为空，其实就是讲新添加的行的文本框的内容设置为空，因为上面采用的是深度拷贝，否则会将数据一起拷贝过来。

（6）.$("tr:last > td > #address").val("")，和上面是一样的道理。

（7）.$(".delOneRow").click(function() { })，为删除按钮注册click事件处理函数。

（8）.if ($("tr").length < 2) { alert("至少保留一行!"); } ，如果行数只剩下一行，那么就会弹出提示。

（8）.else{ if (confirm("确认删除?")) {$(this).parent().parent().remove();}}，点击删除的时候弹出确认框，这样的话会将当前删除按钮的父元素的父元素删除，其实就是tr删除。

二.相关阅读：

（1）.:first选择器参阅jQuery :first一章节。

（2）.clone()方法参阅jQuery clone()一章节。

（3）.after()方法参阅jQuery after()一章节。

（4）.parent()方法参阅jQuery parent()一章节。

（4）.remove()方法参阅jQuery remove()一章节。

jQuery动态添加和删除表格行的更多相关文章

  1. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  2. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. jQuery----事件绑定之动态添加、删除table行

    在jquery中,给元素绑定事件,本文一共介绍三种方法,运用案例,针对最常用的on()方法,进行事件绑定操作. 事件绑定方法: ①$(element).bind() 参数:{ “事件名称1”:func ...

  4. jQuery动态添加、删除按钮及input输入框

    输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...

  5. JS添加和删除表格行

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. jQuery 动态添加、删除css样式

    1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:w ...

  7. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  8. jQuery如何动态添加具有删除按钮的行

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  9. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

随机推荐

  1. Mysql-Sqlalchemy-ORM框架

    import sqlalchemy from sqlalchemy import create_engine from sqlalchemy.ext.declarative import declar ...

  2. 多进程-Pool进程池

    from multiprocessing import Pool import os,time def Foo(i): time.sleep(2) print("in process&quo ...

  3. sql server select和set赋值的区别

    --SQL Server中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT --当表达式返回一个值并对一个变量进行赋值时,推荐使用 SET 方法 (1)SELECT可以在一条语句里对 ...

  4. WPF中关于合并资源字典

    一.本项目中 <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!--<ResourceD ...

  5. 访问gitlab从http方式改为ssh方式，gitlab使用的不是标准22端口

    设置步骤:1,本地进入.ssh查看是否存在密钥对:xxx和xxx.pub命令:cd ~/.ssh2,如果不存在,使用ssh-keygen来创建命令:ssh-keygen -t rsa -C " ...

  6. Linux下svn服务器的安装与配置-备份-恢复-计划任务

    简介:SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Subvers ...

  7. PIL：处理图像的好模块

    介绍 PIL是一个专门用来处理图像的模块,可以对图象进行各种各样的变换 打开一张图片 from PIL import Image # 调用Image下的open方法,即可打开一张图片 # 得到的im便 ...

  8. python-迭代器与生成器2

    python-迭代器与生成器2 def fib(max): n,a,b=0,0,1 while n<max: #print(b) yield b a,b=b,a+b #t=(b,a+b) 是一个 ...

  9. 递归型SPFA+二分答案 || 负环 || BZOJ 4773

    题解: 基本思路是二分答案,每次用Dfs型SPFA验证该答案是否合法. 一点细节我注释在代码里了. 代码: #include<cstdio> #include<cstring> ...

  10. crt执行cat命令后乱码

    cat查看二进制文件后所有命令都乱码执行reset即可恢复