プロトタイプ1.5.1で兄弟要素の順序を上下にどのように移動しますか?

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

  •  03-07-2019
  •  | 
  •  

質問

フォーム内のテーブル行の「上」と「下」を移動できる機能を設定しようとしています。テーブルの行数は動的です。ユーザーはボタンを押して行を追加できます。各テーブル行には複数のフィールドがあります。異なるクラス名を持つヘッダー行とフッター行があるため、hasClassNameのチェック。

バージョン1.5.1で動作する必要があることに気づく前に、Prototype 1.6で使用するためにこの関数を最初に正常に作成しました。テストに時間が利用できるようになったら、Prototypeの最新バージョンにアップグレードしますが、プロジェクトの現在のバージョンで動作させるにはこれが必要です。

主な問題は、1.5では挿入のコンテンツとして要素を挿入できないことです。つまり、挿入する要素のHTMLが必要です。これにより、要素のHTML(変数" insertHTML")にアクセスすると、これが元のHTMLであり、ユーザーが関連フォーム要素に入力した情報が含まれないという問題が発生します。

ご協力いただければ幸いです。

moveDataDef: function(num, dir) {
    var targRow = $('dataDefItem'+num);
    var content = targRow.innerHTML;
    var siblings;
    var insertHTML = targRow.inspect() + targRow.innerHTML + '</tr>';

    if(dir == 'up')
        siblings = targRow.previousSiblings();
    else
        siblings = targRow.nextSiblings();

    if (siblings[0].hasClassName('dataDefItem')) {
        targRow.remove();
        if(dir == 'up')
            new Insertion.Before(siblings[siblings.length - 1].id, targRow);
        else
            new Insertion.After(siblings[0].id, targRow);
    }
}
役に立ちましたか?

解決

このコードの一部を使用して、下位のifブロックを置き換えることができると思います。ネイティブDOM関数、つまり insertBefore()

を使用します
if (siblings[0].hasClassName('dataDefItem')) {
  var targetParent = targRow.parentNode;
  var sibling = siblings[0];

  if(dir == 'up'){
    targRow.remove();
    targetParent.insertBefore(targRow, sibling);
  } else {
    sibling.remove();
    targetParent.insertBefore(sibling, targRow);
  }
}

参考までに、興味があれば、これは私のPOCコードです:

<table id="tb1">
<tbody>
<tr id="tr1"><td>1</td></tr>
<tr id="tr2"><td>2</td></tr>
<tr id="tr3"><td>3</td></tr>
</tbody>
</table>

<script type="text/javascript">
/* <![CDATA[ */
(function(){
var trr3 = $('tr3');
var tp = trr3.parentNode; 
var trr1 =trr3.previousSiblings();
trr3.remove();
tp.insertBefore(trr3, trr1[0]);
})();
/* ]]> */
</script>

ありがとう。

更新:タイプミスを修正(「{」および「}」が欠落)。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top