Zeilen in JQuery tauschen

Wenn ich eine Tabelle wie unten und ein Pfeil nach oben und unten bewegt Zeilen nach oben und unten, wie würde ich mich über vertauschen von Zeilen in 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>

InformationsquelleAutor der Frage DotnetDude | 2009-03-06

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

    arbeiten

    InformationsquelleAutor der Antwort cobbal

  2. 60

    Hier ist eine andere Lösung.

    Bewegen eine Zeile nach unten: 

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

    Bewegen eine Zeile nach oben:

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

    InformationsquelleAutor der Antwort

  3. 6

    Hier ein etwas erweitertes Beispiel, in der Hoffnung Sie werden es nützlich finden... 🙂

    $('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);
    }
});

    InformationsquelleAutor der Antwort Tod Thomson

  4. 4

    Hier ist ein plugin , funktioniert drag-and-drop Tabellenzeilen

    InformationsquelleAutor der Antwort Ólafur Waage

  5. 4

    Bewegen Row1 ein Schritt, den Sie tun würde:

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

    InformationsquelleAutor der Antwort svinto

  6. 1

    Ich würde versuchen:

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

    Aber ich denke, es ist besser, zu vertauschen Zeilen " Inhalt statt swapping Zeilen selbst, so können Sie sich auf die Nummerierung. So,

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

    InformationsquelleAutor der Antwort Ilya Birman

  7. 1

    Bin ich per drag-and-drop-plugin für swap-Kategorien in der Tabelle (mit subcathegories), und nach nicht funktioniert. insertAfter funktioniert.
    ähnliches Thema

    InformationsquelleAutor der Antwort Jaroslav Štreit

  8. 0

    Hier ist der code zum vertauschen von Zeilen. Lässt #Row1 und #Row3

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

    Die clone(true) verwendet wird, so dass Ereignisse werden ebenfalls berücksichtigt.

    Wenn Sie möchten, um eine Zeile nach oben und nach unten, dann verwenden Sie diesen code.
    Bewegen Zeile nach OBEN

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

    Verschieben Zeile nach UNTEN

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

    InformationsquelleAutor der Antwort Akshay

  9. 0

    Dies ist eine generische Funktion hat 3 Parameter: Quell-Zeile, Zielzeile und einen boolean, der angibt, ob die Zeile nach oben oder unten.

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

    Können Sie es auf diese Weise:

    swapTR(sourceTR, targetTR, true);

    InformationsquelleAutor der Antwort Francisco Goldenstein

Schreibe einen Kommentar