首页 > Web开发 > 详细

jquery表格增加删除后改变序号

时间:2016-03-28 02:09:17      阅读:286      评论:0      收藏:0      [点我收藏+]

有个小bug,懒得修了。

目的:增加一行的时候,td第一列排序。

   删除一行的时候,td第一列排序

技术分享

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <script src="../bower_components/jquery/dist/jquery.js"></script>
 5     </head>
 6     
 7     <style>
 8         div {
 9             width: 300px;
10             height:300px;
11             border: 1px solid red;
12             background-color: grey;
13         }
14     
15         #myTable {
16             width: 100px;
17             height:100px;
18             border: 1px solid red;
19         }
20     
21         #myTable tr, #myTable td {
22             border: 1px solid red;
23         }
24     </style>
25     
26     <script>
27         var arr = [];
28         $(document).ready(function() {        
29             $(input[type="button"]).click(function() {
30                 var len = $(#myTable tr).length;
31                 var temp = (len === 1) ? A : $(#myTable tr:last td:first).html();
32                 var next = String.fromCharCode(parseInt(temp.charCodeAt() + 1));
33                 var sign = temp.charCodeAt() || hyy;
34                 var _obj = new Obj(next, sign);
35                 var _temp = <tr><td> + _obj.sort + </td><td> + _obj.sign + </td><td> + _obj.del + </td></tr>
36                 arr.push(_obj);
37                 $(#myTable).append(_temp);
38                 
39                 $(#myTable tr:last a ).on(click, function() {
40                     $(this).parent().parent().remove();
41                     var temp = $(this).parent().parent().find(td:first).html();
42                     var _index = parseInt(temp.charCodeAt() - 65);
43                     arr.splice(_index, 1);
44                     sortTable();
45                 });
46                 
47                 sortTable();
48                 
49             });
50         }); 
51         
52         function  Obj(sort, sign) {
53             this.sort = sort;
54             this.sign = sign;
55             this.del = <a>删除</a>;
56         }
57         
58         function sortTable() {
59             $.each($(#myTable tr).not(:first), function(index, value, full) {
60                 var temp = String.fromCharCode(65 + index);
61                 $(this).find(td:first).html(temp);
62                 if(arr[index] && arr[index]["sort"]) {
63                     arr[index]["sort"] = temp;
64                 }
65             })
66         }
67     
68     </script>
69     
70     <body>
71         <div>
72             <table id="myTable" >
73                 <tr >
74                     <td>TEST</td>
75                 </tr>
76             </table>
77         </div>
78         <input type="button" value="ADD" />
79     </body>
80 </html>

 

jquery表格增加删除后改变序号

原文:http://www.cnblogs.com/maduar/p/5327512.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!