Обмен строк в JQuery

Question

Если у меня есть таблица, как показано ниже, и у меня есть стрелки вверх и вниз, которые перемещают строки вверх и вниз, как мне поменять местами строки в JQuery?

<tr id="Row1">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>

Answer 1

Вот еще одно решение.

Чтобы переместить строку вниз:

jQuery("#rowid").next().after(jQuery("#rowid"));

Чтобы переместить строку вверх:

jQuery("#rowid").prev().before(jQuery("#rowid"));

Answer 2

$("#Row1").after($("#Row2"));

будет работать

Answer 3

Вот немного расширенный пример, надеясь, что вы найдете его полезным ...:)

$('table').on('click', '.move-up', function () {
    var thisRow = $(this).closest('tr');
    var prevRow = thisRow.prev();
    if (prevRow.length) {
        prevRow.before(thisRow);
    }
});

$('table').on('click', '.move-down', function () {
    var thisRow = $(this).closest('tr');
    var nextRow = thisRow.next();
    if (nextRow.length) {
        nextRow.after(thisRow);
    }
});

Answer 4

Чтобы переместить Row1 на один шаг вниз, вы должны сделать:

$me = $("#Row1");
$me.after($me.nextSibling());

Answer 5

Вот плагин , который перетаскивает строки таблицы

Answer 6

Вот код для обмена строк. Давайте возьмем # Row1 и # Row3

$('#Row1').replaceWith($('#Row3').after($('#Row1').clone(true)));

Клон (true) используется для учета событий.

Если вы хотите переместить строку вверх и вниз, используйте этот код. Переместить ряд UP

var tableRow = $("#Row1");
tableRow.insertBefore(tableRow.prev());

Переместить строку вниз

var tableRow = $("#Row1");
tableRow.insertAfter(tableRow.next());

Answer 7

Я использую плагин перетаскивания для подкачки категорий в таблице (с подкатегориями), и после не работает. insertAfter работает. похожая тема

Answer 8

Я бы попробовал:

var tmp = $ ('#Row1')
$ ('#Row1').remove
$ ('#Row2').after ($ ('#Row1'))

Но я думаю, что лучше менять содержимое строк, а не менять сами строки, чтобы можно было полагаться на нумерацию. Таким образом,

var tmp = $ ('#Row1').html ()
$ ('#Row1').html ($ ('#Row2').html ())
$ ('#Row2').html (tmp)

Answer 9

Обычно я делаю что-то вроде этого:

    <table id="mytable">
    <tr>
        <td>row 1</td>
        <td><input type="hidden" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 2</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 3</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 4</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="hidden" value="↓" class="move down" /></td>
    </tr>
</table>

<script>
    $('#mytable input.move').click(function() {
        var row = $(this).closest('tr');
        if ($(this).hasClass('up')){
            row.prev().before(row);
        }

        else{
            row.next().after(row);
        }            

        $(this).closest('table').find('tr:first').find('td:eq(1) input').prop('type', 'hidden');
        $(this).closest('table').find('tr:last').find('td:eq(2) input').prop('type', 'hidden');
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(1) input').prop('type', 'button');
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(2) input').prop('type', 'button');
    });
</script>

Так что это также скрывает ВВЕРХ в первом ряду и ВНИЗ в последнем ряду. Вы можете изменить его, чтобы снова идти сверху, если спускаетесь в последнем ряду. Но вот как мне это нужно.

Привет

Answer 10

Это универсальная функция, которая имеет 3 параметра: исходную строку, целевую строку и логическое значение, указывающее, движется ли строка вверх или вниз.

var swapTR = function (sourceTR, targetTR, isBefore) {
    sourceTR.fadeOut(300, function () {
        sourceTR.remove();
        if (isBefore) {
            targetTR.before(sourceTR);
        }
        else {
            targetTR.after(sourceTR);
        }
        sourceTR.fadeIn(300);
        initializeEventsOnTR(sourceTR);
    });
};

Вы можете использовать его следующим образом:

swapTR(sourceTR, targetTR, true);