ホームページ > 記事 > ウェブフロントエンド > DOM の基礎チュートリアル: DOM を使用してフォームを制御する_基礎知識

DOM の基礎チュートリアル: DOM を使用してフォームを制御する_基礎知識

WBOYオリジナル: 2016-05-16 16:18:471309ブラウズ

今はテーブルの CSS コントロールについては説明しません。まず、テーブルの一般的に使用される DOM を共有しましょう。

テーブルの追加操作によく使用されるメソッドは、insertRow() メソッドと insertCell() メソッドです。

行はゼロから計算されます。例:

コードをコピーコードは次のとおりです:

var oTr = document.getElementById("member")。 insertRow(2 )

は 2 行目に新しい行を追加することを意味します。

コードをコピーしますコードは次のとおりです:

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("11 月 5 日");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i
var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

変数 oTr はテーブルに新しい行を挿入し、insertCell を使用してこの行に新しいデータを挿入し、createTextNode を使用して新しいテキストノードを作成し、それを appendChild の oTd に渡します。oTd は新しいセルです。

1. 行を挿入します (テーブルを動的に追加します)

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">
window.onload=function(){
    var oTr = document.getElementById("メンバー").insertRow(2);    //插入一行
    var aText = new Array();
    aText[0] = document.createTextNode("fresheggs");
    aText[1] = document.createTextNode("W610");
    aText[2] = document.createTextNode("11 月 5 日");
    aText[3] = document.createTextNode("Scorpio");
    aText[4] = document.createTextNode("1038818");
    for(var i=0;i         var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}





        誕生日
        星座
        モバイル

2.表格を変更する内容

テーブルの作成後は、HtmlDom を直接使用してテーブルの操作を実行でき、document.getElementById()、document.getElementsByTagName() の操作よりも便利です。
oTable.rows[i].cell[j]
上記では、行、セルの 2 つのプロパティを介して、テーブル特定のコンテンツの i 行と j 列 (すべてが 0 から始まる) にアクセスし、単一の要素オブジェクトを取得した後、innerHTML プロパティを変更して宇のコンテンツを使用できます。 > 例: 修正4行5列の内容は良好です
以下の代コードを使用できます

复制代代码如下:

var oTable = document.getElementById("table1");

oTable.rows[4].cells[5].innerHTML = "良い";

3.删除表格内容

テーブルには追加、変更、削除機能があります。

テーブル内の削除行には、deleteRow(i) メソッドが使用されます。i は行番号です。
テーブル内の削除列は tr の deleteCell(j) メソッドを使用します。

次のように、表格の第 2 行および原来表の第 3 行の第 2 列を示します

复制代代码如下:

var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

次のコードは、動的削除が HTML フレームワーク全体に影響を与えないこと、またはテーブルに多くのコンテンツがある場合を考慮して、テーブルの 2 行目と元のテーブルの 3 行目の 2 列の削除を表します。、動的な削除と追加が使用できます

コードをコピーしますコードは次のとおりです:

<スクリプトタイプ="text/javascript">

window.onload=function(){

var oTr = document.getElementById("member").insertRow(2) //行を挿入
;
var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("11 月 5 日");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i
var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

}

メンバーリスト
名前	クラス
アイザック	W13	6 月 24 日	がん	1118159
ガールウィング	W210	9 月 16 日	乙女座	1307994
テイストストーリー	W15	11 月 29 日	射手座	1095245

＆lt; th scope = "col"＆gt; class＆lt;/th＆gt;

列を削除

コードをコピー

コードは次のとおりです:

function deleteColumn(oTable, iNum) {

// 列削除関数をカスタマイズします。つまり、各行の対応するセルを削除します 

for (var i = 0; i 
oTable.rows[i].deleteCell(iNum);

}

window.onload = function() {

var oTable = document.getElementById("table1");

deleteColumn(oTable, 2);

}

テーブルの列を削除する場合、DOM には直接呼び出すことができるメソッドはありません。このメソッドは 2 つのパラメーターを受け取ります。1 つのパラメーターはテーブルオブジェクトで、もう 1 つのパラメーターはユーザーが指定する列です。番号を削除したい。記述方法は非常に簡単で、deleteCell()メソッドを使用して、各行に対応するセルの削除メソッドを実行します。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 関数の属性とメソッド_JavaScript スキルに関する簡単な説明次の記事：JavaScript 関数の属性とメソッド_JavaScript スキルに関する簡単な説明

続きを見る

DOM の基礎チュートリアル: DOM を使用してフォームを制御する_基礎知識

関連記事