亚洲精品福利在线观看,亚洲香蕉久久一区二区,国产精品亚洲A∨天堂不卡

jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)

之前寫過一個(gè)簡單的利用jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除的例子，有些人評(píng)論說"如果表格中是input元素，那么刪除后的東西都將自動(dòng)替換，這樣應(yīng)該是有問題的，建議樓主改進(jìn)！"，故特意改進(jìn)了一下！

在項(xiàng)目中很多時(shí)候遇到這樣的問題,需要?jiǎng)討B(tài)的增加、刪除表格的行，很多情況下我們都是在頁面來設(shè)置一個(gè)隱藏域的值，然后在js方法里動(dòng)態(tài)的++或--，在學(xué)習(xí)jQuery的過程中，我試著用簡單的方法來模擬實(shí)現(xiàn)這一個(gè)過程

效果圖如下：

刪除之前

刪除2行后：

改進(jìn)后具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title></title>
7

<script>
8

$(document).ready(function(){
9

//<tr/>居中
10

$("#tab tr").attr("align","center");
11

//增加<tr/>
13

$("#but").click(function(){
14

var _len = $("#tab tr").length;
15

$("#tab").append("<tr id="+_len+" align='center'>"
16

+"<td>"+_len+"</td>"
17

+"<td>Dynamic TR"+_len+"</td>"
18

+"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
19

+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>刪除</a></td>"
20

+"</tr>");
21

})
22

})
23

//刪除<tr/>
25

var deltr =function(index)
26

{
27

var _len = $("#tab tr").length;
28

$("tr[id='"+index+"']").remove();//刪除當(dāng)前行
29

for(var i=index+1,j=_len;i<j;i++)
30

{
31

var nextTxtVal = $("#desc"+i).val();
32

$("tr[id=\'"+i+"\']")
33

.replaceWith("<tr id="+(i-1)+" align='center'>"
34

+"<td>"+(i-1)+"</td>"
35

+"<td>Dynamic TR"+(i-1)+"</td>"
36

+"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
37

+"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>刪除</a></td>"
38

+"</tr>");
39

}
40

}
42

</script>
43

</head>
44

<body>
45

<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
47

<tr>
48

<td width="20%">序號(hào)</td>
49

<td>標(biāo)題</td>
50

<td>描述</td>
51

<td>操作</td>
52

</tr>
53

</table>
54

<div style="border:2px;
55

border-color:#00CC00;
56

margin-left:20%;
57

margin-top:20px">
58

<input type="button" id="but" value="增加"/>
59

</div>
60

</body>
61

</html>
62

源代碼下載：Dynamic Table Column Operate

posted on 2009-03-13 10:41 absolute 閱讀(84151) 評(píng)論(25) 編輯收藏所屬分類: JavaScript

常用鏈接

留言簿(1)

隨筆分類(16)

隨筆檔案(17)

工作流

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: HTML頭部信息[Reship] jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)