2

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>

上下の矢印は完全に正常に機能しますが、icon-arrow-left と icon-arrow-right を使用して行を一番上または一番下に移動できないようです。

ここで何が問題なのですか？

4

1 に答える 1

3

あなたが望むものを理解するのは少し難しかったですが、私はこれがそれであると確信しています:

フィドル

$(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);
    }
});
于 2013-08-13T22:29:15.853 に答える