DOM操作テーブルの例（DOMはテーブルを作成します）

<表の境界線="1"幅="300">
<caption>スタッフリスト</caption>
<頭>
<tr>
<th>名前</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<t本文>
<tr>
<td>張三</td>
<td>男性</td>
<td>20</td>
</tr>
<tr>
<td>李思</td>
<td>女性</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<tdcolspan="3">合計: N</td>
</tr>
</tfoot>
</テーブル>

<スクリプト>
window.onload = 関数(){
vartable = document.createElement("テーブル");
//テーブルに属性を追加する
table.width=300;//このメソッドも使用できます: table.setAttribute('width',300)
table.border=1;</p> <p>//表のタイトルを作成する
varcaption = document.createElement("キャプション");
table.appendChild(caption);</p> <p>//表のタイトルにコンテンツを追加する
//caption.innerHTML="スタッフテーブル"; //W3c 標準以外の方法
varcaptionText=document.createTextNode("人事テーブル");
caption.appendChild(captionText);</p> <p>
//テーブルの最初の行（ヘッダー行）を作成します
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//列
varth1 = document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="データ";
varth2 = document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="データ";</p> <p>document.body.appendChild(テーブル);
};
</スクリプト>

window.onload = 関数(){
vartable=document.getElementsByTagName("table")[0];
アラート(table.children[0].innerHTML);
};

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

window.onload = 関数(){
//HTMLDOMを使用してテーブル要素を取得します
vartable = document.getElementsByTagName('table')[0]; //テーブル参照を取得
//HTMLDOMに従って表のヘッダーとフッターを取得します<thead>、<tfoot>
alert(table.tHead); //テーブルヘッダーを取得する
alert(table.tFoot); //テーブルのフッターを取得します</p> <p> //HTMLDOMに従ってテーブル本体を取得します<tbody>
alert(table.tBodies); //テーブル本体のコレクションを取得する
};

window.onload = 関数(){
//HTMLDOMを使用してテーブル要素を取得します
vartable = document.getElementsByTagName('table')[0]; //テーブル参照を取得
//HTMLDOMに従ってテーブル内の行数を取得します
alert(table.rows.length); // HTMLDOMに従ってテーブル本体の行数を取得します
alert(table.tBodies[0].rows.length); //本文の行数を取得する
};

window.onload = 関数(){
//HTMLDOMを使用してテーブル要素を取得します
vartable = document.getElementsByTagName('table')[0]; //テーブル参照を取得します</p> <p> //HTMLDOMに従って、テーブル本体の最初の行のセルの数を取得します (tr)
alert(table.tBodies[0].rows[0].cells.length); //最初の行のセルの数を取得します
};

window.onload = 関数(){
//HTMLDOMを使用してテーブル要素を取得します
vartable = document.getElementsByTagName('table')[0]; //テーブル参照を取得します</p> <p> //HTMLDOMに従って、テーブル本体の最初の行の最初のセルの内容を取得します（td）
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //最初の行の最初のセルの内容を取得します
};

<スクリプト>
window.onload = 関数(){
//HTMLDOMを使用してテーブル要素を取得します
vartable = document.getElementsByTagName('table')[0]; //テーブル参照を取得します</p> <p> //HTMLDOMに従ってタイトル、ヘッダー、フッター、行、セルを削除します
//table.deleteCaption(); //タイトルを削除
//table.deleteTHead(); //<thead> を削除
//table.tBodies[0].deleteRow(0);//<tr>の行を削除します
//table.tBodies[0].rows[0].deleteCell(0); //<td>のセルを削除します
//table.tBodies[0].rows[0].deleteCell(1); //セルの内容を削除します。これはセルを削除するのと同じで、次の内容が入力されるはずです。
};
</スクリプト>

window.onload = 関数(){
//HTMLDOMに従ってテーブルを作成する
vartable = document.createElement('table');
テーブル境界=1;
table.width=300;</p> <p>table.createCaption().innerHTML='スタッフテーブル';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead(); //このメソッドは参照を返します
vartr=thead.insertRow(0);//このメソッドは参照を返します</p> <p>vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//データを追加する方法の1つとして、次の方法も使用できます
td.innerHTML="データ";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('データ2'));
td2.innerHTML="データ 2";</p> <p>document.body.appendChild(テーブル);
};表を作成する場合、<table>、<tbody>、<th> には特別なメソッドはありません。document を使用して作成する必要があります。既存のメソッドをシミュレートし、insertTH() などの特定の関数を記述することもできます。