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