手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >使用jquery写个更改表格行顺序的小功能
使用jquery写个更改表格行顺序的小功能
摘要:周末写了个更改表格行顺序的小功能,直接贴代码表格部分如下:复制代码代码如下:时间详情操作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>

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

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

【使用jquery写个更改表格行顺序的小功能】相关文章:

jQuery实现表格行上下移动和置顶效果

Javascript动态创建表格及删除行列的方法

jQuery实现返回顶部功能

AspNet中使用JQuery boxy插件的确认框

jQuery获取字符串中出现最多的数

使用JavaScript刷新网页的方法

Jquery使用css方法改变样式实例

一个表格收缩展开的函数

用JavaScript实现页面重定向功能的教程

jquery右下角自动弹出可关闭的广告层

精品推荐
分类导航