AJAX を使用せずに HTML 入力フィールドの行を並べ替える方法

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

  •  06-07-2019
  •  | 
  •  

質問

HTML 入力テキスト フィールドの行セットを生成しています。エンドユーザーが並べ替えできるようにしたいと考えています。AJAX は使いたくないですが、JavaScript は大丈夫です。

各行の横にいくつかの矢印ボタンを配置して、これを押すとフィールドが上下に移動するのは問題ありません。

AJAX に関する私の問題は、この機能だけでは重すぎる (50 ～ 60kb) ことです。Yahoo のコード (YUI) をいくつか見てみましたが、やはり、特定の機能にとっては過剰なようです。私はこれを見つけました - http://www.danvk.org/wp/dragtable/ - これは最も軽いコードのように見えますが、列の並べ替えのみが可能です。

私は最後のオプションに取り組む予定ですが、これを行う方法 (つまり、ユーザーが行単位のフィールドを並べ替えられるようにする方法) については、他の考えやアプローチも受け入れます。

追伸：この議論には重要ではないと思いますが、私は PHP を使用してこれらの HTML テキスト フィールドを生成しています。

役に立ちましたか？

解決

ジョセフの答えに追加...

によると W3C DOM レベル 2 コア仕様:

前に挿入

既存の子ノード refChild の前にノード newChild を挿入します。...] NewChildがすでに木にいる場合、最初に削除されます。

したがって、電話する必要はありません removeChild() 電話する前に insertChild().

また、IE6 の DOM サポートは非​​常に悪いため、専用のコードを作成する必要がある場合があります。あるいは、このブラウザのサポートに時間を無駄にしたくないかもしれません。 ユーザーにアップグレードを依頼する. 。または、本当に IE6 をサポートする必要がある場合は、JavaScript ライブラリ (jQuery など) を使用するのが簡単な解決策になる可能性があります。

編集： これは、Josef の答えに基づいた最終的な JavaScript ソリューションです。

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

他のヒント

これに似たjavascript関数を書くことができます

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

次のように行で使用します：

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

このような非常に簡単なタスクのために、Javascriptフレームワークを実際に参照する必要がないことに同意します。

混乱しているようです。 AJAXは、Javascriptを使用して、実際に新しいページを読み込むことなく、サブリクエストを介してサーバーから追加のコンテンツを読み込むことを指す一般的な用語です。 AJAXリクエストを処理できるさまざまなJavascriptライブラリがあります。

「AJAX」と言うときに、JQueryのような最も人気のあるライブラリの1つを考えているのでしょうか？

質問に関して-覚えておくべきことの1つは、適切なサーバー構成を使用すると、クライアントブラウザーは最初の要求後にJavascriptライブラリを一般的にキャッシュすることです。したがって、一貫した全体的な読み込み時間は、そのようなライブラリのサイズの影響を受けません-最初のページの読み込みのみです。 GoogleがホストするJQueryのコピー。サイトの大多数の訪問者によって既にキャッシュされている可能性があります。

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