<!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. Git_基础命令

    gitinit//初始化一个Git仓库" role="presentation">gitinit//初始化一个Git仓库gitinit//初始化一个Git仓库 gi ...

  2. linux 下如何将网页版应用生成桌面图标

    使用linux mint已经两年了,很多国民应用,都没有Linux版,但是这些应用都有网页版,今天就说下最简单的将网页应用变成桌面应用,无需配置,安装任何插件.以微信为例; 首先,在谷歌浏览器打开网页 ...

  3. python基础之函数当中的装饰器

    在实际工作当中存在一个开放封闭原则 1.对扩展是开放的 为什么要对扩展开放呢? 我们说,任何一个程序,不可能在设计之初就已经想好了所有的功能并且未来不做任何更新和修改.所以我们必须允许代码扩展.添加新 ...

  4. Codeforces 1190A. Tokitsukaze and Discard Items

    传送门 显然从左到右考虑每个要删除的数 维护一个 $cnt$ 表示之前已经删除了 $cnt$ 个数,那么当前所有要删除数的实际位置就要减去 $cnt$ 直接暴力枚举哪些数在最左边一个块然后一起删除 每 ...

  5. django自带登录认证与登录自动跳转

    # 导入django自带模块 from django.contrib.auth import authenticate, login, logout # 使用authenticate进行认证,使用lo ...

  6. NODE代理，yang

    const express = require('express'); const proxy = require('http-proxy-middleware');//引入代理中间件 const a ...

  7. jumpserver开源堡垒机部署安装

    0x01.前言 Jumpserver 是全球首款完全开源的堡垒机,使用 GNU GPL v2.0 开源协议,是符合 4A 的专业运维审计系统. Jumpserver 使用 Python / Djang ...

  8. linux上搭建单机版hadoop和spark

    依赖的安装包 首先hadoop和spark肯定是必须的,而hadoop是用java编写的,spark是由Scala编写的,所以还需要安装jdk和scala. 大数据第三方组件我们统统都安装在/opt目 ...

  9. 利用nethogs查看哪些进程占用网络带宽

    一.安装nethogs centos6版本安装: 1.安装依赖包 [root@hlsms-fensheng- ~]# yum install ncurses* 已加载插件:fastestmirror, ...

  10. Linux tcpdump命令详解与Wireshark

    简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...