jQuery實現表格行的動態增加與刪除(改進版)
阿新 • • 發佈:2018-09-19
ans XML 隱藏域 locks 頁面 order blog 這樣的 ken
2 <html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<script type="text/javascript" src="jquery-1.3.1.js"></script>
6<title></title>
7<script>
8 $(document).ready(function(){
9 //<tr/>居中
10 $("#tab tr").attr("align","center");
11
12 //增加<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
24 //刪除<tr/>
25 var deltr =function(index)
26 {
27 var _len = $("#tab tr").length;
28 $("tr[id=‘"+index+"‘]").remove();//刪除當前行
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
41 }
42</script>
43</head>
44<body>
45
46 <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
47 <tr>
48 <td width="20%">序號</td>
49 <td>標題</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>
之前寫過一個簡單的利用jQuery實現表格行的動態增加與刪除的例子,有些人評論說"如果表格中是input元素,那麽刪除後的東西都將自動替換,這樣應該是有問題的,建議樓主改進!",故特意改進了一下!
在項目中很多時候遇到這樣的問題,需要動態的增加、刪除表格的行,很多情況下我們都是在頁面來設置一個隱藏域的值,然後在js方法裏動態的++或--,在學習jQuery的過程中,我試著用簡單的方法來模擬實現這一個過程
效果圖如下:
刪除之前
刪除2行後:
改進後具體代碼如下:
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<script type="text/javascript" src="jquery-1.3.1.js"></script>
6<title></title>
7<script>
8 $(document).ready(function(){
9 //<tr/>居中
10
11
12 //增加<tr/>
13 $("#but").click(function(){
14 var _len = $("#tab tr").length;
15 $("#tab").append("<tr id="+_len+" align=‘center‘>"
16 +"<td>"+_len+"</td>"
17
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
24 //刪除<tr/>
25 var deltr =function(index)
26 {
27 var _len = $("#tab tr").length;
28 $("tr[id=‘"+index+"‘]").remove();//刪除當前行
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
41 }
42</script>
43</head>
44<body>
45
46 <table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
47 <tr>
48 <td width="20%">序號</td>
49 <td>標題</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>
jQuery實現表格行的動態增加與刪除(改進版)