在新增行或者删除行的时候重新设置序号

1、现在我们想要实现一个序号动态变化的功能,在从多条数据里面可能你想在某行下面插入一条数据,下面的蓝色按钮就是添加一行的按钮,但是添加完你会发现一个问题,那就是序号的问题,无论你给不给新增的这条数据序号们都会发现序号都不能实现每个序号按顺序排列下去,那样看起来就是否不美观,那么我们是否可以设置序号的动态变化,每当新增一条数据或者删除一条数据的时候重新排序,那么问题来了,我们该如何去实现这个功能?
2、首先我们先来看看每一行的序号在初始是如何设置的,在我的代码里这是tbody标签
里面的tr标签里面的第一个td标签里面的第一个span标签里面设置的,那么我们可以通过 ( &quot; t b o d y t r s p a n [ c l a s s = ′ n u m ′ ] &quot; ) [ i ] 这 句 代 码 获 取 到 第 i + 1 行 的 s p a n 标 签 , 输 出 结 果 是 &lt; s p a n c l a s s = &quot; n u m &quot; s t y l e = &quot; w i d t h : 40 p x ; &quot; &gt; i + 1 &lt; / s p a n &gt; , 这 样 我 们 可 以 获 取 到 每 一 行 的 序 号 所 在 的 s p a n 标 签 , 那 么 我 们 就 可 以 去 改 变 每 一 个 s p a n 标 签 的 值 , 那 么 如 果 我 们 想 要 多 行 数 据 从 上 而 下 按 1 、 2 、 3 等 等 排 序 下 去 那 么 我 们 就 可 以 通 过 获 取 所 有 行 , 每 当 添 加 一 行 数 据 或 者 删 除 一 行 数 据 的 时 候 就 通 过 f o r 循 环 从 第 一 行 开 始 改 变 序 号 , 从 1 一 直 排 序 下 来 , (&quot;tbody tr span[class=&#x27;num&#x27;]&quot;)[i]这句代码获取到第i+1行的span标签,输出结果是&lt;span class=&quot;num&quot; style=&quot;width:40px;&quot;&gt;i+1&lt;/span&gt;,这样我们可以获取到每一行的序号所在的span标签,那么我们就可以去改变每一个span标签的值,那么如果我们想要多行数据从上而下按1、2、3等等排序下去那么我们就可以通过获取所有行,每当添加一行数据或者删除一行数据的时候就通过for循环从第一行开始改变序号,从1一直排序下来, ("tbodytrspan[class=num]")[i]i+1span<spanclass="num"style="width:40px;">i+1</span>spanspan123for1(" tbody tr").length可以获取行的总数,因为我下面有一行‘合计’那行不需要序号所有就是$(" tbody tr").length-1行需要排序,通过for循环 :
function SerialChange() {
var parameter = $(" tbody tr").length;
for (var i = 0; i < parameter; i++) {
( ( ((" tbody tr span[class=‘num’]")[i]).text(i + 1);//获取第i+1个子span标签并且回填序号值
}
}
在每个新增行或者删除行的函数里面当新增完行或者删除完行之后再去调用SerialChange(),便可实现序号的从新排序

初始:
在这里插入图片描述

在第二行之后添加一行之后未处理序号
在这里插入图片描述

在第二行之后添加一行之后处理序号重新排序得到的
在这里插入图片描述

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值