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>
                详情
            </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"）;

    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>

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