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タグに直接隣接しているため、事実上、ページ全体に移動します。

編集：OK、コメントから、過去に移動しない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