Wie eine Baumstruktur in Javascript DOM zu schaffen?

StackOverflow https://stackoverflow.com/questions/1417940

  •  07-07-2019
  •  | 
  •  

Frage

Das wird zu dumm / zu einfach klingen - Tut mir leid, aber ich viel experimentiert und konnte auf die richtige Lösung nicht kommen

!

Ich verwende dieses folgende Stück Code - das ist eine Reihe von Textfeldern und unten nach oben macht. Leider führt die Auf- und Abbewegung doesnt Anschlag und auf der ganzen Seite auf! :) 

function up(row) {
    // need to stop somewhere
    var prevRow = row.previousSibling;
    if(prevRow != null) {
        row.parentNode.insertBefore(row, prevRow);
    }
};

function down(row) {
    // need to stop somewhere as well
    var nextRow = row.nextSibling;
    row.parentNode.insertBefore(row, nextRow.nextSibling);
};

Meine generierten HTML ist eine Kombination von XML- und XSL. Die XSL sieht wie folgt aus: 

<xsl:for-each select=".../...">
<p>
<button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input>
...
...
...
</p>
</xsl:for-each>

Wie oben beschrieben, das funktioniert, aber die Auf- und Abbewegungen stoppen nicht. Ich versuchte, die xsl umschließt: for-each in einem anderen p-Tag und einen div-Tag, aber weder gearbeitet. Ich habe versucht, die Eltern dieser p-Tags als etwas anderes als der Body-Tag zu haben.

Habe ich mich klar ausgedrückt?

Generiert HTML hinzugefügt unter: 

<html>
<head>
<script>
function up(row) {
...
};
function down(row) {
...
};
</script>
</head>
<body>
<form name="edit_form" action="edit.php" method="POST">
...
<?xml version="1.0"?>
...
<p>
<button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input name="CRorder[record10354881]" type="text" value="0" disabled="" size="4"/>
<input name="CRpreference[record10354881]" type="text" value="10" disabled="" size="4"/>
<input name="CRlabel[record10354881]" type="text" value="label1"/><input name="CRvalue[record10354881]" type="text" value="22222222222"/></p>
<p><button type="button" onclick="up(this.parentNode)">Up</button>
<button type="button" onclick="down(this.parentNode)">Down</button>
<input name="CRorder[record10354882]" type="text" value="1" disabled="" size="4"/>
...
...
</form></body>
</html>
War es hilfreich?

Lösung

auf dem HTML-basierte, und unter der Annahme, die ... s enthalten keine passenden Paare von Tags, die die P ein Kind machen, das P die Up / Down-Tasten (und andere paraphinalea) enthält, wird die Liste der Ps nach oben bis es das erste Kind des FORM-Tag. Da dies direkt neben dem BODY-Tag ist, ist dies in der Tat, es den ganzen Weg bis die Seite zu bewegen.

Edit: OK, aus Ihrem Kommentar, wenn Sie andere Geschwister auf die P-Tags, die Sie nicht tun, um sie vorbei zu bewegen, müssen Sie sie irgendwie markieren und Ihre up / down Funktionen ändern, um diese Grenzen zu gehorchen. So etwas wie ... 

...<tag id="upperLimit">...

function up(row) {
  // need to stop somewhere
   var prevRow = row.previousSibling;

   if(prevRow != null && prevRow != document.getElementById("upperLimit")) {
     row.parentNode.insertBefore(row, prevRow);
  }
};

mit einer ähnlichen Beschränkung der unteren Grenze.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top