1、现在我们想要实现一个序号动态变化的功能,在从多条数据里面可能你想在某行下面插入一条数据,下面的蓝色按钮就是添加一行的按钮,但是添加完你会发现一个问题,那就是序号的问题,无论你给不给新增的这条数据序号们都会发现序号都不能实现每个序号按顺序排列下去,那样看起来就是否不美观,那么我们是否可以设置序号的动态变化,每当新增一条数据或者删除一条数据的时候重新排序,那么问题来了,我们该如何去实现这个功能?
2、首先我们先来看看每一行的序号在初始是如何设置的,在我的代码里这是tbody标签
里面的tr标签里面的第一个td标签里面的第一个span标签里面设置的,那么我们可以通过
(
"
t
b
o
d
y
t
r
s
p
a
n
[
c
l
a
s
s
=
′
n
u
m
′
]
"
)
[
i
]
这
句
代
码
获
取
到
第
i
+
1
行
的
s
p
a
n
标
签
,
输
出
结
果
是
<
s
p
a
n
c
l
a
s
s
=
"
n
u
m
"
s
t
y
l
e
=
"
w
i
d
t
h
:
40
p
x
;
"
>
i
+
1
<
/
s
p
a
n
>
,
这
样
我
们
可
以
获
取
到
每
一
行
的
序
号
所
在
的
s
p
a
n
标
签
,
那
么
我
们
就
可
以
去
改
变
每
一
个
s
p
a
n
标
签
的
值
,
那
么
如
果
我
们
想
要
多
行
数
据
从
上
而
下
按
1
、
2
、
3
等
等
排
序
下
去
那
么
我
们
就
可
以
通
过
获
取
所
有
行
,
每
当
添
加
一
行
数
据
或
者
删
除
一
行
数
据
的
时
候
就
通
过
f
o
r
循
环
从
第
一
行
开
始
改
变
序
号
,
从
1
一
直
排
序
下
来
,
("tbody tr span[class='num']")[i]这句代码获取到第i+1行的span标签,输出结果是<span class="num" style="width:40px;">i+1</span>,这样我们可以获取到每一行的序号所在的span标签,那么我们就可以去改变每一个span标签的值,那么如果我们想要多行数据从上而下按1、2、3等等排序下去那么我们就可以通过获取所有行,每当添加一行数据或者删除一行数据的时候就通过for循环从第一行开始改变序号,从1一直排序下来,
("tbodytrspan[class=′num′]")[i]这句代码获取到第i+1行的span标签,输出结果是<spanclass="num"style="width:40px;">i+1</span>,这样我们可以获取到每一行的序号所在的span标签,那么我们就可以去改变每一个span标签的值,那么如果我们想要多行数据从上而下按1、2、3等等排序下去那么我们就可以通过获取所有行,每当添加一行数据或者删除一行数据的时候就通过for循环从第一行开始改变序号,从1一直排序下来,(" 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(),便可实现序号的从新排序
初始:
在第二行之后添加一行之后未处理序号
在第二行之后添加一行之后处理序号重新排序得到的