Перемещение строк в JQuery

Если у меня есть таблица, как показано ниже, и у меня есть стрелка вверх и вниз, которая перемещает строки вверх и вниз, как мне пойти на замену строк в 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>

Ответ 1

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

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

Ответ 2

Здесь другое решение.

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

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

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

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

Ответ 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);
    }
});

Ответ 4

Здесь плагин, который выполняет перетаскивание строк таблицы

Ответ 5

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

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

Ответ 6

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

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

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

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

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

Чтобы переместить строку DOWN

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

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

Это общая функция, которая имеет 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);

Ответ 10

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

    <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>

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

Привет