jquery實(shí)現(xiàn)更改表格行順序示例

更新時(shí)間：2014年04月30日 10:34:55 作者：

本文主要介紹了jquery實(shí)現(xiàn)更改表格行順序示例,大家參考使用吧

表格部分如下：

<table class="table" id="test_table">
    <thead>
        <tr>
               <th>時(shí)間</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代碼，其中會(huì)為要變更的行在變更順序后加上class=danger

復(fù)制代碼代碼如下:

    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>

更改后可以按照每行的唯一標(biāo)記提交新的順序

您可能感興趣的文章:

sdfssdf

相關(guān)文章

JQuery選中select組件被選中的值方法
下面小編就為大家分享一篇JQuery選中select組件被選中的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
jQuery的顯示和隱藏方法與css隱藏的樣式對比
display:none和visible:hidden都能把網(wǎng)頁上某個(gè)元素隱藏起來，而jQuery的顯示和隱藏又有哪些方法，在本文將為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過
2013-10-10
jQuery.event兼容各瀏覽器的event詳細(xì)解析
jQuery在遵循W3C規(guī)范的情況下，對事件的常用屬性進(jìn)行了封裝，使得事件處理在各大瀏覽器下都可以正常的運(yùn)行而不需要進(jìn)行瀏覽器類型判斷
2013-12-12
騰訊與新浪的通過IP地址獲取當(dāng)前地理位置（省份）的接口
通過IP地址獲取當(dāng)前地理位置（省份）的接口，方便大家可以直接使用結(jié)合自己的系統(tǒng)。
2010-07-07
jQuery的ready方法詳解
本文主要介紹了jQuery的ready方法的使用方法，用此方法實(shí)現(xiàn)了當(dāng)爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。
2014-11-11
jQuery元素選擇器用法實(shí)例
這篇文章主要介紹了jQuery元素選擇器用法,通過一個(gè)簡單的隱藏div元素實(shí)例講述了元素選擇器的用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
瀏覽器窗口大小變化時(shí)使用resize事件對框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小，但對框架卻不起作用，這里介紹下實(shí)現(xiàn)方法，需要的朋友可以參考下
2014-05-05
使用jQuery管理選擇結(jié)果
這篇文章主要介紹了使用jQuery管理選擇結(jié)果的相關(guān)資料,需要的朋友可以參考下
2015-01-01
兩個(gè)select之間option的互相添加操作(jquery實(shí)現(xiàn))
兩個(gè)select,將其中一個(gè)select選中的選項(xiàng)添加到另一個(gè)select中,或者點(diǎn)擊全部添加按鈕將所有的option都添加過去.
2009-11-11
為jQuery添加Webkit的觸摸的方法分享
這段代碼是我在做13年一份兼職的時(shí)候無聊加上去的，為jQuery添加觸摸事件的支持。因?yàn)樽龅糜悬c(diǎn)無聊，所以就幫客戶添加了用響應(yīng)式網(wǎng)頁+JS touch兼容了移動(dòng)設(shè)備，主要是Webkit的移動(dòng)設(shè)備
2014-02-02