JavaScript学習メモ(4)テーブルソート

この記事で実装するテーブルのソートは大きく以下の手順に分かれます:
1. ソート対象の行をすべて取得し、その参照を配列にプッシュします
2. ソート対象の行に応じてソートする際に使用する配列を書き込みます比較関数
3. すべての行参照を含む配列を並べ替えます 4. 並べ替えられた配列を、配列によって参照される行とともに指定された順序で DOM に書き込みます

DOM を使用してテーブルを操作することに慣れていない場合は、「DOM を使用してブラウザ互換のテーブル操作を作成する」を参照してください。配列のソートに慣れていない場合は、「配列のソートと漢字でのソート」を参照してください。 " "localeCompare() メソッドの使用"。DOM を使用してテーブルを操作し、配列の並べ替えがテーブルの並べ替えの基礎であるためです。
まず、この例で使用されているコードを見てみましょう:
1 var asc = true
2 var arrayTr = [];ソート対象の行参照
3 Function Sorttable () {
4 // ROWS ;
8 。 }
12 /昇順の場合
13 asc = false;
17 } else {
18
22行は数値的にdomに書き戻されます。 ;
27 oTBody タグは、長さの関係で、表のタイトル部分とソート対象部分を区切るために使用されます。 「JavaScript 高度なプログラミング」では、Table の tBodies 属性は配列ではなく JS のコレクションであり、sort() メソッドがないため、直接ソートに使用できないと記載されています。JS コレクションの概念をまだ勉強する必要があります。ですが、これはこの記事の焦点では​​ありません。ここで説明したい重要な点は、tBodies を直接並べ替えることはできないということです。
プログラムの 13 ～ 22 行目は 3 番目のステップを実装しています。ここでは 2 番目のステップの具体的な実装を非表示にしています (詳細は後の部分で説明します)。特定のメソッドの実装については、プログラムの全体的な理解がありません。また、プログラムでは、ソートされた行をロードするためにグローバル コンテナを使用するため、関数の実行後、arrayTr には常に最後にソートされた行の参照シーケンスが含まれることにも注意してください。このとき、順序を逆にしたい場合は、次のようにします。 reverse( ) メソッドを呼び出すだけでよく、配列を逆ソートする必要はありません。
プログラムの 24 行目では、 document.createDocumentFragment() を使用してドキュメント フラグメントを取得します。 documentFragment は、主に DOM ツリーにまだ追加されていない要素を格納するために使用される不完全なドキュメント オブジェクトです。 DOM 上の js 操作のキャッシュとして使用すると、DOM が操作されるたびにクライアントが再描画する必要がなく、DOM 内の変更が一度に表示されます。
2 番目のステップの実装に使用される関数の具体的な実装を見てみましょう:
1 /**数 2 * 比較関数 * 3 * @param {Object} Param1: リング 1
4 * @param {Object} Param2 リング 2
5 * @Return {Number} If Param1 & GT returns 1
6 *If Param1 = = Param2 は 0 を返します
7 *Param1 と LT が -1 を返す場合
8*/
9 function CompareFunc(oTr1,oTr2){
10 var param1 = oTr1.cells[0].childNodes [ 0].nodeValue;
11 var param2 = oTr2.cells[0].childNodes[0].nodeValue;
12 //両方のパラメータが文字列型の場合
13 if(isNaN(param1) && isNaN(param2) ){
14param1.localecompare（param2）;
18return-; < localeCompare() メソッドの使用」。10 行目と 11 行目のデータの取得方法を変更しただけだからです。
上記では、単一列テーブルをソートするためのアイデアと方法を説明しました。これらのアイデアを使用して、プログラムを簡単に拡張して、より多くの機能を備えたテーブル ソートを実装できます。

上記は JavaScript 学習ノート (4) のテーブルソートの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。