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

时间：2022-01-25 12:43:12

有个小bug，懒得修了。

目的：增加一行的时候，td第一列排序。

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

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

 <!DOCTYPE HTML>

 <html>

     <head>

         <script src="../bower_components/jquery/dist/jquery.js"></script>

     </head>

     <style>

         div {

             width: 300px;

             height:300px;

             border: 1px solid red;

             background-color: grey;

         }

         #myTable {

             width: 100px;

             height:100px;

             border: 1px solid red;

         }

         #myTable tr, #myTable td {

             border: 1px solid red;

         }

     </style>

     <script>

         var arr = [];

         $(document).ready(function() {

             $('input[type="button"]').click(function() {

                 var len = $('#myTable tr').length;

                 var temp = (len === 1) ? 'A' : $('#myTable tr:last td:first').html();

                 var next = String.fromCharCode(parseInt(temp.charCodeAt() + 1));

                 var sign = temp.charCodeAt() || 'hyy';

                 var _obj = new Obj(next, sign);

                 var _temp = '<tr><td>' + _obj.sort + '</td><td>' + _obj.sign + '</td><td>' + _obj.del + '</td></tr>'

                 arr.push(_obj);

                 $('#myTable').append(_temp);

                 $('#myTable tr:last a ').on('click', function() {

                     $(this).parent().parent().remove();

                     var temp = $(this).parent().parent().find('td:first').html();

                     var _index = parseInt(temp.charCodeAt() - 65);

                     arr.splice(_index, 1);

                     sortTable();

                 });

                 sortTable();

             });

         }); 

         function  Obj(sort, sign) {

             this.sort = sort;

             this.sign = sign;

             this.del = '<a>删除</a>';

         }

         function sortTable() {

             $.each($('#myTable tr').not(':first'), function(index, value, full) {

                 var temp = String.fromCharCode(65 + index);

                 $(this).find('td:first').html(temp);

                 if(arr[index] && arr[index]["sort"]) {

                     arr[index]["sort"] = temp;

                 }

             })

         }

     </script>

     <body>

         <div>

             <table id="myTable" >

                 <tr >

                     <td>TEST</td>

                 </tr>

             </table>

         </div>

         <input type="button" value="ADD" />

     </body>

 </html>

相关文章