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