之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故特意改进了一下!
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行,很多情况下我们都是在页面来设置一个隐藏域的值,然后在js方法里动态的++或--,在学习jQuery的过程中,我试着用简单的方法来模拟实现这一个过程
效果图如下:
删除之前
删除2行后:
改进后具体代码如下:
1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<htmlxmlns="/1999/xhtml">
3<head>
4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
5<scripttype="text/javascript"src="jquery-1.3.1.js"></script>
6<title></title>
7<script>
8$(document).ready(function(){
9//<tr/>居中
10$("#tabtr").attr("align","center");
11
12//增加<tr/>
13$("#but").click(function(){
14var_len=$("#tabtr").length;
15$("#tab").append("<trid="+_len+"align='center'>"
16+"<td>"+_len+"</td>"
17+"<td>DynamicTR"+_len+"</td>"
18+"<td><inputtype='text'name='desc"+_len+"'id='desc"+_len+"'/></td>"
19+"<td><ahref=\'#\'οnclick=\'deltr("+_len+")\'>删除</a></td>"
20+"</tr>");
21})
22})
23
24//删除<tr/>
25vardeltr=function(index)
26{
27var_len=$("#tabtr").length;
28$("tr[id='"+index+"']").remove();//删除当前行
29for(vari=index+1,j=_len;i<j;i++)
30{
31varnextTxtVal=$("#desc"+i).val();
32$("tr[id=\'"+i+"\']")
33.replaceWith("<trid="+(i-1)+"align='center'>"
34+"<td>"+(i-1)+"</td>"
35+"<td>DynamicTR"+(i-1)+"</td>"
36+"<td><inputtype='text'name='desc"+(i-1)+"'value='"+nextTxtVal+"'id='desc"+(i-1)+"'/></td>"
37+"<td><ahref=\'#\'οnclick=\'deltr("+(i-1)+")\'>删除</a></td>"
38+"</tr>");
39}
40
41}
42</script>
43</head>
44<body>
45
46<tableid="tab"border="1"width="60%"align="center"style="margin-top:20px">
47<tr>
48<tdwidth="20%">序号</td>
49<td>标题</td>
50<td>描述</td>
51<td>操作</td>
52</tr>
53</table>
54<divstyle="border:2px;
55border-color:#00CC00;
56margin-left:20%;
57margin-top:20px">
58<inputtype="button"id="but"value="增加"/>
59</div>
60</body>
61</html>