jQuery动态添加和删除表格行

<!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()一章节。