<!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. Vue首页加载过慢 解决方案

    一.什么导致了首页初步加载过慢:app.js文件体积过大 二.解决方法: 1.Vue-router懒加载 vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持 ...

  2. Codeforces 1216F. Wi-Fi

    传送门 这个题一眼 $dp$ 就是设 $f[i][0/1]$ 表示我们只考虑前 $i$ 个位置,并且保证覆盖了前 $i$ 个位置,当前位置 选/不选 的最小代价 考虑转移,设题目给出的字符串为 $s$ ...

  3. maven的配置以及使用

    1.下载并配置 下载之后解压,并配置系统环境变量(网上的方法很多),配置maven的环境变量之前确保java的环境变量已经配置成功. 2.eclipse安装maven插件 eclipse安装maven ...

  4. [Next] 四.在next中引入redux

    添加 redux 写过 react 稍微复杂一些应用的话,应该都对 redux(mobx)有一定的了解.这次将 redux 引入到项目中 因为之前写项目的习惯,更喜欢使用 redux-thunk 改写 ...

  5. C++ 对象构造顺序、构析函数、临时对象。

    对象的构造顺序: 1.对于局部对象,构造顺序是根据程序执行流进行构造,从上到下. #include <stdio.h> class Test { int mi; public: Test( ...

  6. sql--inner join , out join

    inner join(又叫join) out join包括left join,right join和full join(也就是left+right)

  7. EJS学习（一）之特性、安装、工作原理

    前言 EJS,"E" 代表 "effective",即[高效],EJS 是一套简单的JavaScript模板,EJS 没有如何组织内容的教条:也没有再造一套迭代 ...

  8. b/s和c/s

    一.B/S结构 B是英文单词“Browser”的首字母,即浏览器的意思:S是英文单词“Server”的首字母,即服务器的意思.B/S就是“Browser/Server”的缩写,即“浏览器/服务器”模式 ...

  9. Uncaught SyntaxError: Unexpected identifier

    $.ajax({ //请求头 type:"POST", contentType:"application/x-www-form-urlencoded", url ...

  10. P1:天文数据获取

    Step1:在sloan的casjob里http://casjobs.sdss.org/CasJobs/,密码用户 jiangbin  123456 查询满足条件的光谱对象,得到光谱对象的plate, ...