The table is as follows:
Copy codeThe Code is as follows:
<Table class = "table" id = "test_table">
<Thead>
<Tr>
<Th> time </th>
<Th> details </th>
<Th> operation </th>
</Tr>
</Thead>
<Tbody>
<Tr cid = "7.0.0-2014-04-29_11-02-24_123" class = "list_line">
<Td>
11:02:24
</Td>
<Td>
Details
</Td>
<Td>
<Span class = "move_btn glyphicon-arrow-up" move_act = "up"> </span>
<Span class = "move_btn 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>
10:00:00
</Td>
<Td>
Details
</Td>
<Td>
<Span class = "move_btn glyphicon-arrow-up" move_act = "up"> </span>
<Span class = "move_btn glyphicon-arrow-down" move_act = "down"> </span>
</Td>
</Tr>
</Tbody>
</Table>
Js Code, which will add class = danger after the change order for the row to be changed
Copy codeThe Code is as follows:
<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 = 'low '){
$ (This). parent (). parent ('tr '). addClass ('danger ')
. Next (). after ($ (this). parent (). parent ('tr '));
}
SetTimeout ("$ ('# test_table tbody tr'). removeClass ('danger ');", 2000 );
});
});
</Script>
After the change, you can submit the new order according to the unique mark of each row.