如何在Javascript DOM中创建树结构？

Question

This is going to sound too silly / too basic - sorry about that, but I experimented a lot and couldn't come to the right solution! 这听起来太愚蠢/太基本了-对此感到抱歉，但是我做了很多尝试，无法找到正确的解决方案！

I'm using this following piece of code - which makes a row of text fields go up and down. 我正在使用以下这段代码-使一行文本字段上下移动。 Unfortunately, the up and down movement doesnt stop and carries on throughout the page! 不幸的是，上下运动并没有停止并且在整个页面上都进行！ :) :)

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

My generated html is a combination of xml and xsl. 我生成的html是xml和xsl的组合。 The XSL looks like this: 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>

As described above, this works, but the up and down movements dont stop. 如上所述，这是可行的，但上下运动不会停止。 I tried enclosing the xsl:for-each in another p tag, and a div tag, but neither worked. 我尝试将xsl：for-each封装在另一个p标签和div标签中，但都没有用。 I was trying to have the parent of these p tags as something other than the body tag. 我试图让这些p标签的父元素作为body标签以外的东西。

Did I make myself clear? 我说清楚了吗？

Generated HTML added below: 生成的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>

Answer 1

Based on your HTML, and assuming the ...s do not contain matched pairs of tags that will make the P a child, the P containing the Up/Down buttons (and other paraphinalea) will move up the list of Ps until it is the first child of the FORM tag. 根据您的HTML，并假设... s不包含使P成为子对象的匹配标记对，则包含Up / Down按钮（和其他副词）的P将在Ps列表中向上移动，直到FORM标签的第一个孩子。 As this is directly adjacent to the BODY tag, this is, in effect, moving it all the way up the page. 由于它直接与BODY标签相邻，因此实际上是将其一直沿页面向上移动。

Edit: OK, from your comment, if you have other siblings to the P tags that you don't to move them past, you'll need to mark them somehow and change your up/down functions to obey those limits. 编辑：好的，根据您的评论，如果您没有将P标记的其他同级移到其他位置，则需要以某种方式对其进行标记，并更改上/下功能以遵守这些限制。 Something like... 就像是...

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

with a similar restriction on the lower limit. 对下限也有类似的限制。

如何在Javascript DOM中创建树结构？

问题描述

1 个解决方案

解决方案1
1 已采纳 2009-09-13 15:47:48

如何在Javascript DOM中创建树结构？

问题描述

1 个解决方案

解决方案1 1 已采纳 2009-09-13 15:47:48

解决方案1
1 已采纳 2009-09-13 15:47:48