随笔-16  评论-84  文章-1  trackbacks-0
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故特意改进了一下!

在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行,很多情况下我们都是在页面来设置一个隐藏域的值,然后在js方法里动态的++或--,在学习jQuery的过程中,我试着用简单的方法来模拟实现这一个过程

效果图如下:

删除之前

删除2行后:


改进后具体代码如下:
 1<!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<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>
62



源代码下载:Dynamic Table Column Operate
posted on 2009-03-13 10:41 absolute 阅读(81936) 评论(25)  编辑  收藏 所属分类: JavaScript

评论:
# re: jQuery学习 表格行的动态增加和删除简单实现 2009-03-13 11:52 | Rique
刚开始看JQuery,学习了!  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现 2009-03-13 12:58 | YXY
很好,值得学习~~~~  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现 2009-03-13 13:31 | Jie
很好
  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现[未登录] 2009-06-07 11:15 | jiery
这个做的很好啊!
但是如何把它里面的数据保存呢?  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现 2009-07-28 14:16 | 网的
你这个好像只是删除最后一行啊
  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现 2010-01-04 16:49 | 匆匆过客
很好,学习了!  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现[未登录] 2010-01-06 14:13 | 过客
如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!  回复  更多评论
  
# re: jQuery学习 表格行的动态增加和删除简单实现 2010-01-17 10:51 | accelerator
这种写法不好维护吧  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2010-11-20 14:26 | iowen
@过客

已经改进,谢谢  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2011-08-02 11:49 | 35法国高规格
台湾何时。。。。。  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2012-03-01 17:31 | 上海
受益匪浅,谢谢  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2012-04-25 17:09 | 小赛
@网的
同感,哥们!  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2012-07-13 16:35 | wanglc
不是只删除最后一行,是删除之后编号依次替换,很快看不见而已
  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版)[未登录] 2013-01-30 11:44 | Nick
为什么我做的时候,把表头覆盖掉了?  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版)[未登录] 2013-01-30 11:45 | Nick
是不是要用insertAfter?  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版)[未登录] 2013-02-19 22:35 | aa
这个代码为什么我烤下来不能执行呢
  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-05-13 12:29 | Zjmainstay
我也有一个。
jQuery动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
http://www.cnblogs.com/Zjmainstay/archive/2012/07/31/jQuery_AutoAddDeleteTableTr.html  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-05-14 10:29 | ioio_Carl
删除一行的时候,input的值可以像你这样传过去,但是我想请问那如果是select的值那要怎么传呢?谢谢!  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-05-14 10:30 | ioio_Carl
@ioio_Carl
方便的话可以麻烦您发邮件告诉我吗?ahjun30@hotmail.com,万分感谢  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-05-14 11:43 | ioio_Carl
@ioio_Carl
好吧。我知道了。参考这篇文章~
http://www.offid.cn/i/564/note/100470.html
就是
$("#select_id").val();  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-08-12 12:38 | 游客X
$("tr[id=\'"+i+"\']")
这里边不需要转义吧?  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2013-08-12 12:39 | 游客X
@游客X
$("tr[id="+i+"]") 就可以了  回复  更多评论
  
# 000[未登录] 2014-03-06 14:04 | 123
123123  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版) 2014-10-07 23:52 | feicoo
正好帮我解决一个难题,谢谢!!!  回复  更多评论
  
# re: jQuery实现表格行的动态增加与删除(改进版)[未登录] 2014-10-16 15:19 | s
s  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: