100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jQuery实现表格行的动态增加与删除(改进版)

jQuery实现表格行的动态增加与删除(改进版)

时间:2020-01-27 10:02:27

相关推荐

jQuery实现表格行的动态增加与删除(改进版)

之前写过一个简单的利用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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。