如何在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标签的父母不是身体标签。

我清楚了吗？

下面添加了生成的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，并假设... s不包含将使P成为子项的匹配标记对，包含向上/向下按钮（和其他paraphinalea）的P将向上移动到Ps列表中直到它是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