JavaScript学習メモ(2) DOMを使ってブラウザ互換のTable操作を書く

テーブルを動的に操作したい場合は、DOM に精通している必要があります。ブラウザの互換性を実現したい場合は、W3C 標準とテーブル操作における各ブラウザの特性に精通している必要があります。現在、Table はデータ表示に最適な選択肢です。DOM は、Table に特別にいくつかの機能とメソッドを追加しました。これにより、よりシンプルで効率的なプログラムを作成できます。

注: この記事のプログラムは IE7 と Firefox3 でテストされました。

手順 1: テーブルを動的に作成する

1 ; return;

13 } Ar14 var tablenode = document.createelement ("table") , "Tablestyle");
18 Tablenode("border",1); for(var j = 0; j 23 var newCell = newRow.insertCell(0);
24 newCell.innerHTML = Number(i+1) + "×" + Number(j+1);
25 }
26}
27 ドキュメント。 body.appendchild (tablenode);
28}
この関数は非常に単純です。 document.createElement () メソッドを使用して Table ラベルを作成する 14 行です。このステップでは注意が必要な箇所はありません。ほとんどのブラウザがこの方法をサポートしているためです。 16 ～ 18 行目では、setAttribute() メソッドを使用して、新しく作成されたテーブル タグに属性を追加します。これらのコード行は IE と FF で解析できますが、書籍「JavaScript Advanced Programming」では次のように指摘されています。 setAttribute() メソッドには大きな問題があります。これを使用すると、変更が常に正しく反映されるわけではありません。IE をサポートする場合は、可能な限り属性を使用することをお勧めします。マスターの言うことは常に意味があるので、メソッドの代わりに属性を使用できます。幸いなことに、FireFox は属性のサポートも提供しているため、次のようにプログラムを変更できます:
1 tableNode.id = "tableNode";
2 tableNode.className = "tableStyle";
3 tableNode.border = "1"; 注意すべき点は、テーブルのクラスを設定するときに className を使用する必要があることです。
21 行目で使用されている insertRow() と 23 行目で使用されている insertCell() は、両方とも Table の DOM によって提供される特別な API であり、対応するメソッドは deleteRow() と deleteCell() です。これら 2 つのメソッドを使用する場合は、細心の注意を払う必要があります。 : IE では両方のメソッドにデフォルトのパラメータ -1 が提供されますが、FireFox ではそれらのパラメータが提供されないため、パラメータがない場合は、IE では通常どおり実行できますが、FireFox では実行できません。したがって、これら 2 つのメソッドには常にパラメータを指定するように注意する必要があります。平たく言えば、これら 2 つの関数のパラメーターの意味は次のように説明できます:
0: 新しい行を既存の行の上に配置します------最新の行インデックス (rowIndex) を常に 0 に設定します。
-1: 新しく作成された行を既存の行の下に配置します -------行インデックスは 0 から増分されます
このパラメーターは手動で設定することもできますが、設定されたパラメーターが行インデックスよりも大きい場合は、現在のテーブル + 1 の場合、プログラムはエラーを報告します。 insertCell() も同様の意味なので、繰り返す必要はありません。

プログラム 2: 指定した行の前後に新しい行を挿入します

1

9 alter("参照 操作対象のテーブルに到達していません");
10 //指定された行を検索します
14 行インデックスを介して if( Number(indexOfRow - 1) 15 var tableRow = tableNode.rows[indexOfRow-1];
16 var tableRow = tableNode.rows.length- 1 ]; // 指定された行の前に新しい行を挿入します
22 If(位置 == 1 ){
23 tableRow.parentNode.insertBefore(newRow,tableRow); tableRow.parentNode.insertBefore(newRow,tableRow.nextSibling);
プログラムの 15 行目で使用される行は、テーブル内のすべての行が返されることを意味します。配列of 、セルに対応: テーブル内のすべてのセルを含む配列。これはすべての行を含む配列なので、当然、配列インデックスを使用して必要な値を取得できます。20 行目で使用されている cloneNode() メソッドは、特定の HTML 要素をターゲットにすることができる DOM メソッドの 1 つです。深いコピー (パラメーターが true) または浅いコピー (パラメーターが false) を実行します。いわゆるディープ コピーは、元の要素と同じ特別な名前を持つ現在の要素のコピーを返すことを意味します。既存の要素と同じ新しい要素を作成する必要がある場合 (複数のファイルのアップロードなど)、このメソッドは多くのコードを節約するのに役立ちます。いわゆる浅いコピーとは、要素の具体的な名前をコピーせずに、要素の骨格だけをコピーすることを意味します。 意味は、上記のプログラムの cloneNode() メソッドのパラメータを false に設定することで実現できます。その効果を観察してください。
23 行目で使用されている insertBefore() メソッドも非常に単純です。指定された要素を現在の要素の前に挿入します。なぜ W3C には insertAfter() がないのかと言う人をよく見かけます。別の方法で考えてみましょう。指定された要素が現在の要素の次の要素の前に挿入されると、insertAfter() メソッドが実装されます。

プログラム 3: 指定された行を削除します

1 /**
2*/
5 function deleteTheRow(deleteRowIndex){
6 var tableNode = document.getElementById("tableNode");
7 var rowCount = tableNode.rows .length;
8
9 if(isNaN(deleteRowIndex) || parseInt(deleteRowIndex) < 1 || parseInt(deleteRowIndex) > Number(rowCount)){
10 warning(" 0 より大きく、以下の数値を入力してくださいthan "+Number (rowCount)+"number")
11 return;
12 }
13 tableNode.deleteRow(Number(deleteRowIndex - 1));
14 この小さなプログラムは何もありません 簡単に言えば、使用される主なメソッドは deleteRow です() ですが、注意してください。渡されるパラメータはテーブル内の行数を超えることはできません。そうでない場合は、エラーが報告されます。

プログラム 4: 指定されたセルを削除します

1 /**

2 *指定されたセルを削除します。3*/

6 function deleteTheCell(indexOfRow,indexOfCell){
7 var tableNode = document.getElementById("tableNode");
8 var rowNode = tableNode .rows[Number(indexOfRow - 1)];
9 rowNode.deleteCell(Number(indexOfCell-1));
10 } 指定された行インデックスと列インデックスを使用して削除するセルを見つけ、deleteCell( ) メソッドを実行し、指定された列を削除するコードはこれと似ています。これは、テーブルの各行をループして、指定された列を見つけて削除するだけです。

上記は、DOM を使用してブラウザ互換のテーブル操作を作成する JavaScript の学習メモ (2) です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。