如何在Javascript DOM中創建樹結構？

Question

這聽起來太愚蠢/太基本了-對此感到抱歉，但是我做了很多嘗試，無法找到正確的解決方案！

我正在使用以下這段代碼-使一行文本字段上下移動。 不幸的是，上下運動並沒有停止並且在整個頁面上都進行！ :)

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>

Answer 1

根據您的HTML，並假設... s不包含使P成為子對象的匹配標記對，則包含Up / Down按鈕（和其他副詞）的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);
  }
};

對下限也有類似的限制。

如何在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