码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-09-19 19:47:30      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:方法   1.0   col   http   query   name   UNC   项目   meta   

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

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

标签:方法   1.0   col   http   query   name   UNC   项目   meta   

原文地址:https://www.cnblogs.com/snowhite/p/9676030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!