<!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. 使用Python基于OpenCV的图像油画特效

    算法步骤: 1.获取图像的灰度图片 2.设计一个小方框(4x4/8x8 /10x10等),统计每个小方框的像素值 3.将0-255的灰度值划分成几个等级,并把第二步处理的结果映射到所设置的各个等级中, ...

  2. docker-文件系统出错处理

    Error response from daemon: error creating overlay mount to /var/lib/docker/overlay2 2018年03月17日 22: ...

  3. Codeforces 1201D. Treasure Hunting

    传送门 看一眼感觉就是 $dp$,但是似乎状态太多了 考虑推推性质 首先每到一行都要把所有宝藏都走到,那么一定会走到最左边的和最右边的宝藏 注意到一旦走完所有宝藏时肯定是在最左边或者最右边的宝藏位置 ...

  4. 附录1：arrayanalysis的本地使用（质量控制）

    访问:https://github.com/BiGCAT-UM/affyQC_Module,点击“Download ZIP”,下载得到affyQC_Module-master.zip,解压得到一个af ...

  5. 使用.NET Core创建Windows服务（一） - 使用官方推荐方式

    原文:使用.NET Core创建Windows服务(一) - 使用官方推荐方式 原文:Creating Windows Services In .NET Core – Part 1 – The &qu ...

  6. Eclipse集成spring-tool-suite（STS）

    1.官方下载 sts是spring官方在eclipse基础上加了很多插件之后封装的开发工具.sts与eclipse完全一样,但是多了很多插件,比如maven,使用起来更加方便.如果使用eclipse自 ...

  7. Linux中的grep 命令

    介绍grep文本处理命令,它也可以解释正则. 常用选项: -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert),只打印没有匹配 ...

  8. springboot-异步线程调用

    启动类:添加@EnableAsync注解 @SpringBootApplication @EnableAsync public class Application{ public static voi ...

  9. Linux操作系统的常用命令（一）

    一.写随笔的原因:上次提到centos7.3安装mysql5.7的一些步骤,恰巧最近面试有碰到一些问LInux操作的常用操作的问题,想通过这篇文章MARK一下,不一定能够全,只是用的比较多的吧(lin ...

  10. 12、rpm

    1.什么是rpm 由红帽开发用于软件包的安装 升级 卸载 查询 2.rpm包是什么样? 组成部分是什么样的? zip-3.0-11.el7.x86_64.rpm #el7 zip-3.0-1. el6 ...