html 消除序号,JS实现删除一行数据页面序号重新排序功能。

JS实现删除一行数据页面序号重新排序功能。

JS实现删除一行数据,页面序号重新排序功能。

【废话,可以直接跳到重点实现】针对这类问题,先整理一下需求和思路:

需求:有一个列表数据,序号为1,2,3...10 删除其中任意一行,比如3,剩余1,2,4...10还要按照1,2,3...9的顺序来排序。然后你在根据你的业务场景去处理你想要的结果集。

思路:1,前端展示序号的时候,需要前端处理(JS实现:对于删除事件进行处理,首先获取当前删除行的序号,再将剩余行序号减1即可)。

2,前端不需要展示序号的时候,可以前端或者后端处理(后端对数据重新排序实现,此文忽略)。

【实现】

1,html页面:

48c8e2c4798048039a95f2ebc8d28229.gif

部分静态html页面:

28a3a6bb8dadd637ab03ac4e30908683.png

新增按钮事件:

fbec22c48874a8b3b6a3f94edc65d14e.png

【重点实现】

39aaa9c99fb1353790401c7ccc367741.png

【扩展分析】

对于列表数据,进行form表单提交的时候,往往是整体数据提交,存在较多的数据量。可以根据form表单提交的性质,修改有规则的name属性值,就可以在后台拿到对应的数据集。此时上文中的每个name属性的值的作用就能体现出来了。

如:name="irmContentTime1",name="irmContentTime2"

在后台就可以直接根据这样的规则去遍历或者有针对性的处理业务数据,同时对于页面有规则的处理也有较大的方便之处。

JS实现删除一行数据页面序号重新排序功能。相关教程

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以按照以下步骤实现: 1. 在table的thead中添加一个新的th元素,用于显示序号。可以设置一个类名或者ID,方便后续操作。 ```html <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> ``` 2. 在table的tbody中新增一行tr元素,并在其中添加td元素,第一个td元素用于显示序号。 ```html <tbody> <tr> <td class="index"></td> <td>张三</td> <td>20</td> </tr> </tbody> ``` 3. 使用jQuery的each方法遍历所有的tr,依次给每个序号td元素赋值为当前的索引值加1。 ```javascript $('tbody tr').each(function(index) { $(this).find('.index').text(index + 1); }); ``` 4. 当需要新增一行tr时,先在tbody中新增一个空白的tr元素,并赋予一个类名或者ID,方便后续操作。 ```html <tbody> <tr> <td class="index"></td> <td>张三</td> <td>20</td> </tr> <tr class="new-row"> <td class="index"></td> <td></td> <td></td> </tr> </tbody> ``` 5. 在对应的按钮或事件中,使用jQuery的clone方法将新HTML结构复制一份,并插入到tbody中新增的空白tr之前。 ```javascript $('.add-row-btn').click(function() { var newRow = $('.new-row').clone(); $('tbody').append(newRow); newRow.removeClass('new-row'); $('tbody tr').each(function(index) { $(this).find('.index').text(index + 1); }); }); ``` 6. 新增完成后,再次遍历所有tr,依次给每个序号td元素赋值为当前的索引值加1。 完整代码如下: ```html <table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td class="index">1</td> <td>张三</td> <td>20</td> </tr> <tr> <td class="index">2</td> <td>李四</td> <td>22</td> </tr> <tr> <td class="index">3</td> <td>王五</td> <td>25</td> </tr> <tr class="new-row"> <td class="index"></td> <td></td> <td></td> </tr> </tbody> </table> <button class="add-row-btn">新增一行</button> <script> $('tbody tr').each(function(index) { $(this).find('.index').text(index + 1); }); $('.add-row-btn').click(function() { var newRow = $('.new-row').clone(); $('tbody').append(newRow); newRow.removeClass('new-row'); $('tbody tr').each(function(index) { $(this).find('.index').text(index + 1); }); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值