CODEWITHSUNDEEP
jquery
Milligran
Milligran

Reputation: 3171

How to move row to the very top or bottom with jquery

I am trying to manipulate a table left, right, very top, very bottom with jquery

In my JavaScript I have:

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;

And in my 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>

The up and down arrow works perfectly fine but I can’t seem to move a row to the very top or the very bottom with the icon-arrow-left and icon-arrow-right.

What is wrong here?

Upvotes: 2

Views: 6445

Answers (1)

musicnothing
musicnothing

Reputation: 3985

It was a little difficult to work out what you wanted, but I'm pretty sure this is it:

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);
    }
});

Upvotes: 3

Related Questions