有个小bug，懒得修了。

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

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

 <!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>

jquery表格增加删除后改变序号的更多相关文章

  1. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JQuery动态增加删除元素

    <form action="" method="post" enctype="multipart/form-data"> < ...

  3. 解决jquery动态增加元素后children值没有变的问题

    html代码如下: <ul id="attr_input_panel"> <li> <div class="attr_input_item& ...

  4. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. jQuery表格自动增加

    <!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta ...

  6. 在页面上绘制一张表格，使用 DOM 节点的动态添加和删除向表格中插入数据，点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  7. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

随机推荐

  1. 不让padding影响元素的宽度

    CSS3 新增了 box-sizing 属性. 以前,如果指定 div 的宽度为 div { width: 100px; height: 100px; padding: 10px; } 则包含 pad ...

  2. MXNet设计笔记之：深度学习的编程模式比较

    市面上流行着各式各样的深度学习库,它们风格各异.那么这些函数库的风格在系统优化和用户体验方面又有哪些优势和缺陷呢?本文旨在于比较它们在编程模式方面的差异,讨论这些模式的基本优劣势,以及我们从中可以学到 ...

  3. Bean

    1. Bean配置项 1.1. ID 在整个IOC容器中Bean的唯一标识 1.2. Class 具体要实例化的类 1.3. Scope 范围,作用域 1.4. Constructor argumen ...

  4. 【ZJOI2004】嗅探器

    练tarjian不错的题,连WA几次后终于会记住tarjian的模板了 原题: 某军搞信息对抗实战演习.红军成功地侵入了蓝军的内部网络.蓝军共有两个信息中心.红军计划在某台中间服务器上安装一个嗅探器, ...

  5. Apache配置代理服务器的方法(2)

    Proxy指令后面的*号表示客户端使用代理服务器访问的目的地址.在上面两个例子中,*号表示所有地址,即禁止使用代理服务器访问所有地址.而如果想仅禁止某一些地址时,可以参考下面的例子: Order de ...

  6. Windows Service 开发,安装与调试

    Visual Studio.net 2010 Windows Service 开发,安装与调试 本示例完成一个每隔一分钟向C:\log.txt文件写入一条记录为例,讲述一个Windows Servic ...

  7. arcgis server 10.2安装后，忘记Manager的用户名和密码

    arcgis server 10.2安装完毕后,需要创建站点,创建站点时,填写管理站点的用户名和密码.自己不小心,创建完毕后,给忘记了用户名和密码.求助Esri,解决方法如下: (1)找到arcgis ...

  8. Joint Deep Learning for Pedestrian Detection笔记

    1.结构图 Introduction Feature extraction, deformation handling, occlusion handling, and classification ...

  9. PHP中的Libevent学习

    wangbin@2012,1,3 目录 Libevent在php中的应用学习 1.      Libevent介绍 2.      为什么要学习libevent 3.      Php libeven ...

  10. Glide 下载Gif文件

    之前做了一个类似朋友圈里的查看大图功能,现在也要加上保存功能. 保存图片有很多思路,可以从imageview里提取bitmap,可以用url下载到本地.imageview提取的话,gif图就会变成一张 ...