jquery上下移动行 [英] Jquery to move row up and down

问题描述

我使用\">这里给出的代码在gridview中使用jquery向上/向下移动行这完美的工作，但如何可以实现移动到第一个位置或在表中的最后一个？

解决方案

添加顶部和底部链接，并在第一行/最后一行之前/之前插入：

DEMO

JS：

  $（document）.ready（function（）{
 $（。up，.down，.top，.bottom）。click（function（）{
 var row = $（this） （tr：first）; 
 if（$（this）.is（。up））{
 row.insertBefore（row.prev（））; 
} else if（$（this）.is（。down））{
 row.insertAfter（row.next（））; 
} else if（$（this）.is（。top ））{
 row.insertBefore（$（table tr：first））; 
} else {
 row.insertAfter（$（table tr ：持续））; 
} 
}）; 
}）; 
  

HTML：

 <表> 
< tr> 
< td> One< / td> 
< td> 
< a href =＃class =up>向上< / a> 
< a href =＃class =down>向下< / a> 
< a href =＃class =top>页首< / a> 
< a href =＃class =bottom>底部< / a> 
< / td> 
< / tr> 
< tr> 
< td>两个< / td> 
< td> 
< a href =＃class =up>向上< / a> 
< a href =＃class =down>向下< / a> 
< a href =＃class =top>页首< / a> 
< a href =＃class =bottom>底部< / a> 
< / td> 
< / tr> 
< tr> 
< td>三< / td> 
< td> 
< a href =＃class =up>向上< / a> 
< a href =＃class =down>向下< / a> 
< a href =＃class =top>页首< / a> 
< a href =＃class =bottom>底部< / a> 
< / td> 
< / tr> 
< tr> 
< td>四个< / td> 
< td> 
< a href =＃class =up>向上< / a> 
< a href =＃class =down>向下< / a> 
< a href =＃class =top>页首< / a> 
< a href =＃class =bottom>底部< / a> 
< / td> 
< / tr> 
< tr> 
< td> Five< / td> 
< td> 
< a href =＃class =up>向上< / a> 
< a href =＃class =down>向下< / a> 
< a href =＃class =top>页首< / a> 
< a href =＃class =bottom>底部< / a> 
< / td> 
< / tr> 
< / table> 
  

I used the code given here to move rows up/down in a gridview using jquery and this works perfectly, but how can implement to move a row to first position or last in the table?

解决方案

Add top and bottom links, and insert after/before the first/last row:

DEMO

JS:

$(document).ready(function(){
    $(".up,.down,.top,.bottom").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else if ($(this).is(".down")) {
            row.insertAfter(row.next());
        } else if ($(this).is(".top")) {
            row.insertBefore($("table tr:first"));
        }else {
            row.insertAfter($("table tr:last"));
        }
    });
});

HTML:

<table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
            <a href="#" class="top">Top</a>
            <a href="#" class="bottom">Bottom</a>
        </td>
    </tr>
</table>

这篇关于jquery上下移动行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！