ホームページ > 記事 > ウェブフロントエンド > dom操作フォーム例(dom作成フォーム)_HTML/Xhtml_Webページ制作

dom操作フォーム例(dom作成フォーム)_HTML/Xhtml_Webページ制作

WBOYオリジナル: 2016-05-16 16:38:121842ブラウズ

1. HTML タグを使用してテーブルを作成します:

コードをコピー

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

職員一覧

名前
性別
年齢

;
張三
男性
20

< ;tr>
李思
女性
22

合計: N

thead、tfoot、caption タグは、テーブル内に 1 つの tbody、tr、td、th タグのみを持つことができます。テーブル内の N

2. DOM を使用してテーブルを作成します

タグは、HTML の中で最も複雑な構造であり、DOM を通じて作成および生成したり、HTMLDOM を通じて操作したりできます。 (HTMLDOM は、HTML を操作するためのより便利で高速な方法を提供します)

コードをコピーします

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

3. DOM を使用してテーブルデータを取得します (DOM を使用してテーブルを操作するのは非常に面倒です)

コードをコピーします

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

window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children [0].innerHTML);

4. HTMLDOM を使用してテーブルデータを取得します (便利、シンプル、明確)。

テーブルは複雑で多くのレベルがあるため、特定の要素を取得するためだけに以前に学習した DOM を使用するのは非常に不快です。そのため、HTMLDOM を使用するとより明確になります。

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

window.onload=function( ){
//HTMLDOM を使用してテーブル要素を取得します
vartable=document.getElementsByTagName('table')[0];//テーブル参照を取得します
//HTMLDOM を押してテーブルの < caption>
alert(table.caption.innerHTML);//キャプションの内容を取得します
//table.caption.innerHTML="Student table";//値を設定することもできます
} ;

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

window.onload=function(){
//HTMLDOM を使用してテーブル要素を取得します
vartable=document.getElementsByTagName('table')[0];//テーブル参照を取得します
//HTMLDOM を押してテーブルヘッダーを取得します

,
alert(table.tHead);//テーブルヘッダーを取得します
alert(table.tFoot);//テーブルフットを取得します< ; /p>

//HTMLDOM を押してテーブル本体を取得します

alert(table.tBodies);//テーブル本体のコレクションを取得します
};

と

はテーブル内で一意であり、1 つだけ存在します。は唯一のものではなく、複数を持つことができるため、最終的に返されるとは要素のコレクションを返します。

コードをコピー

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

window.onload=function( ){
//HTMLDOM を使用してテーブル要素を取得します
vartable=document.getElementsByTagName('table')[0];//テーブル参照を取得します
//HTMLDOM を押してテーブル内の行数を取得しますtable
alert( table.rows.length);// 行番号のコレクション、数量を取得します

//HTMLDOM を押してテーブル本体の行数を取得します
alert(table.tBodies[0].rows.length);//本体内の行のコレクションを取得します。数量
};

コードをコピーします

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

window.onload= function(){
//HTMLDOM を使用してテーブル要素を取得します
vartable=document.getElementsByTagName('table')[0];//テーブル参照を取得

//HTMLDOM を押してテーブル本体の最初の行のセルの数を取得します (tr)
alert(table.tBodies[0].rows[0].cells.length);//Get最初の行セルの数
};

コードをコピー

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

window.onload=function(){
//HTMLDOM を使用してテーブル要素を取得します
vartable=document.getElementsByTagName('table')[0];/ /テーブル参照の取得<

//HTMLDOM を押して、テーブル本体の最初の行の最初のセルの内容を取得します (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML ) ;//最初の行の最初のセルの内容を取得します
};

コードをコピー

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

5. HTMLDOM作成テーブル

コードをコピー

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

window.onload=function( ){
//HTMLDOM に従ってテーブルを作成します
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='人事テーブル';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//このメソッドは参照を返します
vartr=thead .insertRow(0);//このメソッドは参照を返します

vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//データを追加する方法として、次のメソッドも使用できます
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data2'));
td2.innerHTML="data2 ";

document.body.appendChild(table);
};テーブルを作成する場合、

、、

を行うには document を使用する必要があります。それを作成します。既存のメソッドをシミュレートし、insertTH() などの特定の関数を作成することもできます。

声明：

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

前の記事：HTMLのimg src=""内でjs関数またはjs変数を呼び出して画像パスを動的に指定_HTML/Xhtml_Webページ制作次の記事：HTMLのimg src=""内でjs関数またはjs変数を呼び出して画像パスを動的に指定_HTML/Xhtml_Webページ制作

続きを見る

dom操作フォーム例(dom作成フォーム)_HTML/Xhtml_Webページ制作

関連記事