jQuery实现表格行的动态增加与删除

最新推荐文章于 2022-03-26 18:28:19 发布

zh921112

最新推荐文章于 2022-03-26 18:28:19 发布

阅读量1.3k

点赞数

分类专栏： Java 文章标签： jquery table 添加表格行

Java 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

效果图如下：

删除之前
<img alt="" src="http://www.blogjava.net/images/blogjava_net/absolutedo/d1.png" border="0" height="244" width="829" />
删除2行后：
<img alt="" src="http://www.blogjava.net/images/blogjava_net/absolutedo/d2.png" border="0" height="203" width="854" />



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=\'#\' οnclick=\'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=\'#\' οnclick=\'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>

zh921112

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现表格行的动态增加与删除

1 2 3 4 5 6 7 8 $(document).ready(function(){ 9 //居中10 $("#tab tr").attr("align","center");11 12 //增加13 $("#but").click(function(){14 var
复制链接

扫一扫