使用jquery写个更改表格行顺序的小功能
使用jquery写个更改表格行顺序的小功能
发布时间:2016-12-30 来源:查字典编辑
摘要:周末写了个更改表格行顺序的小功能,直接贴代码表格部分如下:复制代码代码如下:时间详情操作2014-04-2911:02:24详情2014-0...

周末写了个更改表格行顺序的小功能,直接贴代码

表格部分如下:

复制代码 代码如下:

<table id="test_table">

<thead>

<tr>

<th>时间</th>

<th>详情</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr cid="7.0.0-2014-04-29_11-02-24_123">

<td>

2014-04-29 11:02:24

</td>

<td>

详情

</td>

<td>

<span move_act="up"></span>

<span move_act="down"></span>

</td>

</tr>

<tr cid="7.0.0-2014-04-29_11-02-24_915">

<td>

2014-04-28 10:00:00

</td>

<td>

详情

</td>

<td>

<span move_act="up"></span>

<span move_act="down"></span>

</td>

</tr>

</tbody>

</table>

js代码,其中会为要变更的行在变更顺序后加上class=danger

复制代码 代码如下:

<script type="text/javascript">

$(function(){

$('.move_btn').click(function(){

var move_act = $(this).attr('move_act');

$('#test_table tbody tr').removeClass('danger');

if(move_act == 'up'){

$(this).parent().parent('tr').addClass('danger')

.prev().before($(this).parent().parent('tr'));

}

else if(move_act == 'down'){

$(this).parent().parent('tr').addClass('danger')

.next().after($(this).parent().parent('tr'));

}

setTimeout("$('#test_table tbody tr').removeClass('danger');", 2000);

});

});

</script>

更改后可以按照每行的唯一标记提交新的顺序

吐槽:喊着加班=狼性的公司都是不适合正常人类生存的公司,把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类