Como criar uma estrutura de árvore no JavaScript DOM?

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

  •  07-07-2019
  •  | 
  •  

Pergunta

Isso vai parecer muito bobo / muito básico - desculpe por isso, mas eu experimentei muito e não consegui chegar à solução certa!

Estou usando este código a seguir - o que faz com que uma fileira de campos de texto suba e desça. Infelizmente, o movimento para cima e para baixo não para e continua durante toda a página! :)

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

Meu HTML gerado é uma combinação de XML e XSL. O XSL se parece com o seguinte:

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

Como descrito acima, isso funciona, mas os movimentos para cima e para baixo não param. Tentei anexar o XSL: para cada uma em outra tag P e uma tag div, mas nenhum deles funcionou. Eu estava tentando ter o pai dessas tags P como algo diferente da etiqueta corporal.

Eu me deixei claro?

HTML gerado adicionado abaixo:

<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>
Foi útil?

Solução

Com base no seu HTML, e assumindo que os ... S não contêm pares de tags correspondentes que farão com que o P uma criança, o P contendo os botões para cima/para baixo (e outros paraphinalea) subirá a lista de PS até que esteja o primeiro filho da etiqueta do formulário. Como isso é diretamente adjacente à etiqueta corporal, isso é, na verdade, movendo -o até a página.

EDIT: OK, pelo seu comentário, se você tiver outros irmãos para as tags P que você não os move, precisará marcá -los de alguma forma e alterar suas funções para cima/para baixo para obedecer a esses limites. Algo como...

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

com uma restrição semelhante no limite inferior.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top