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


    有个小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>
  • 相关阅读:
    基于keepalived搭建MySQL的高可用集群
    weblogic启动问题
    wind7下搭建ftp服务器
    数据库连接数使用情况监控
    windows下自动删除n天前的文件
    oracle RAC调整数据文件大小并移动表到指定的表空间
    oracle表空间使用情况查询
    vue的.vue文件是怎么run起来的(vue-loader)
    react router @4 和 vue路由 详解(七)react路由守卫
    react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
  • 原文地址:https://www.cnblogs.com/maduar/p/5327512.html
Copyright © 2020-2023  润新知