Wie bewegen Sie Geschwisterelemente bestellen nach oben / unten in Prototyp 1.5.1?

Question

Ich versuche, eine Funktion zur Einrichtung zu ermöglichen, bewegt sich in einer Form ‚up‘ und ‚down‘ einer Tabellenzeile. Die Anzahl der Tabellenzeilen ist dynamisch - der Benutzer eine Schaltfläche zusätzliche Zeilen hinzufügen schlagen kann. Es gibt mehrere Felder in jeder Tabellenzeile. Es gibt eine Kopfzeile und Fußzeile mit verschiedenen Klassennamen, damit die Prüfung von hasClassName.

Ich schrieb über diese Funktion erfolgreich für die Verwendung mit Prototype 1.6 vor der Realisierung, ich brauche es mit Version 1.5.1 zu arbeiten. Wir werden auf die neueste Version von Prototype Upgrade, wenn die Zeit zum Testen zur Verfügung steht, aber ich brauche diese unter dem aktuellen Version unseres Projektes zu arbeiten.

Das Hauptproblem ist in 1.5, dass Sie nicht nur ein Element als Inhalt eines Einführungs einfügen. Das bedeutet, ich brauche den HTML-Code des Elements I eingefügt werden soll. Dies bringt das Problem, dass, wenn ich den HTML-Code für das Element (Variable „insertHTML“) Zugriff auf diese die ursprüngliche HTML ist und beinhaltet nicht die Informationen in die zugehörigen Formularelemente durch den Benutzer eingegeben werden.

Jede Hilfe wäre sehr geschätzt.

moveDataDef: function(num, dir) {
    var targRow = $('dataDefItem'+num);
    var content = targRow.innerHTML;
    var siblings;
    var insertHTML = targRow.inspect() + targRow.innerHTML + '</tr>';

    if(dir == 'up')
        siblings = targRow.previousSiblings();
    else
        siblings = targRow.nextSiblings();

    if (siblings[0].hasClassName('dataDefItem')) {
        targRow.remove();
        if(dir == 'up')
            new Insertion.Before(siblings[siblings.length - 1].id, targRow);
        else
            new Insertion.After(siblings[0].id, targRow);
    }
}

Answer 1

Ich denke, Sie Teil dieses Codes verwenden könnten, Ihren niedriger, wenn Block zu ersetzen. Es verwendet nativen DOM-Funktion, dh insert () :

if (siblings[0].hasClassName('dataDefItem')) {
  var targetParent = targRow.parentNode;
  var sibling = siblings[0];

  if(dir == 'up'){
    targRow.remove();
    targetParent.insertBefore(targRow, sibling);
  } else {
    sibling.remove();
    targetParent.insertBefore(sibling, targRow);
  }
}

Für Ihre Referenz, wenn Sie daran interessiert sind, das ist mein POC-Code:

<table id="tb1">
<tbody>
<tr id="tr1"><td>1</td></tr>
<tr id="tr2"><td>2</td></tr>
<tr id="tr3"><td>3</td></tr>
</tbody>
</table>

<script type="text/javascript">
/* <![CDATA[ */
(function(){
var trr3 = $('tr3');
var tp = trr3.parentNode; 
var trr1 =trr3.previousSiblings();
trr3.remove();
tp.insertBefore(trr3, trr1[0]);
})();
/* ]]> */
</script>

Danke.

Update:. Fix Tippfehler (fehlende '{' und '}')