标签：style java color 使用 width io
使用jquery写的更改表格行顺序的小功能
表格部分：
复制代码代码如下:
<table class="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" class="list_line">
< td>
2014-04-29 11:02:24
< /td>
< td>
详情 www.jbxue.com
< /td>
< td>
< span class="move_btn glyphicon
glyphicon-arrow-up" move_act="up"></span>
< span
class="move_btn glyphicon glyphicon-arrow-down"
move_act="down"></span>
< /td>
< /tr>
< tr cid="7.0.0-2014-04-29_11-02-24_915"
class="list_line">
< td>
2014-04-28
10:00:00
< /td>
< td>
详情
< /td>
< td>
< span class="move_btn
glyphicon glyphicon-arrow-up" move_act="up"></span>
< span class="move_btn glyphicon glyphicon-arrow-down"
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‘);
www.jbxue.com
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更改表格行顺序实例,码迷,mamicode.com
jquery更改表格行顺序实例
标签：style java color 使用 width io
原文地址：http://www.cnblogs.com/linuxnotes/p/3700530.html
