如何使用jquery将行移动到顶部或底部

时间:2013-08-13 22:09:57

标签: jquery

我试图用jquery

操纵一个左,右,顶部,底部的桌子

在我的JavaScript中我有:

row = $(this).parents("tr:first");
        if ($(this).is(".icon-arrow-up")) {
          row.insertBefore(row.prev());
        }
        if ($(this).is(".icon-arrow-down")) {
          row.insertAfter(row.next());
        }
        if ($(this).is(".icon-arrow-left")) {
          row.insertAfter;
        }
        if ($(this).is(".icon-arrow-right")) {
          return row.insertBefore;

在我的HTML中:

<div id="arrangevideos" class="modal hide fade" aria-hidden="true">
    <table class="table">
        <thead>
            <tr>
                <th>Isrc</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-animate="'table-anim'" ng-repeat="isrc in videolist track by $index">
                @*<tr ng-animate="'table-anim'" ng-repeat="isrc in videolist">*@
                <td>{{isrc}}</td>
                <td>
                    <i class="icon-arrow-left"></i>
                    <i class="icon-arrow-up"></i>
                    <i class="icon-arrow-down"></i>
                    <i class="icon-arrow-right"></i>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>


</div>

向上和向下箭头的效果非常好但我似乎无法使用图标箭头左侧和图标箭头向右移动到最顶部或最底部。

这里有什么问题?

1 个答案:

答案 0 :(得分:3)

找出你想要的东西有点困难,但我很确定就是这样:

FIDDLE

$(document).on('click', 'i', function () {
    row = $(this).parents("tr:first");
    if ($(this).is(".icon-arrow-up")) {
        row.insertBefore(row.prev());
    }
    if ($(this).is(".icon-arrow-down")) {
        row.insertAfter(row.next());
    }
    if ($(this).is(".icon-arrow-left")) {
        $(this).parents('tbody').prepend(row);
    }
    if ($(this).is(".icon-arrow-right")) {
        $(this).parents('tbody').append(row);
    }
});