jQuery动态添加和删除表格行
<!DOCTYPE html><html><head><meta charset="utf-8"><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()一章节。
