Как создать древовидную структуру в Javascript DOM?

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

  •  07-07-2019
  •  | 
  •  

Вопрос

Это будет звучать слишком глупо / слишком просто - извините за это, но я много экспериментировал и не смог найти правильное решение!

Я использую следующий фрагмент кода, который заставляет ряд текстовых полей перемещаться вверх и вниз. К сожалению, движение вверх и вниз не останавливается и продолжается по всей странице! :) 

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

Мой сгенерированный html представляет собой комбинацию xml и xsl. XSL выглядит так: 

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

Как описано выше, это работает, но движения вверх и вниз не прекращаются. Я попытался заключить xsl: for-each в другой тег p и тег div, но ни один из них не сработал. Я пытался сделать родителем этих тегов p нечто отличное от тега body.

Я ясно дал понять?

<Ч>

Сгенерированный HTML добавлен ниже: 

<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>
Это было полезно?

Решение

Исходя из вашего HTML и предполагая, что ... не содержат совпадающих пар тегов, которые сделают P дочерним, P, содержащий кнопки вверх / вниз (и другие парафиналы), переместится вверх по списку P пока это не первый дочерний элемент тега FORM. Поскольку он непосредственно примыкает к тегу BODY, он фактически перемещает его по всей странице.

Редактировать: ОК, из вашего комментария, если у вас есть другие братья и сестры к тегам P, которые вы не хотите перемещать, вы должны как-то пометить их и изменить свои функции вверх / вниз, чтобы соблюдать эти ограничения. Что-то вроде ... 

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

с аналогичным ограничением на нижний предел.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top