DOM操作テーブルの例(DOMはテーブルを作成します)

DOM操作テーブルの例(DOMはテーブルを作成します)

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


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

<表の境界線="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>
</テーブル>

表には thead、tfoot、caption タグを 1 つだけ使用できます。表には tbody、tr、td、th タグを N 個使用できます。

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

<table> タグは HTML の中で最も複雑な構造を持っています。DOM を通じて作成したり、HTMLDOM を通じて操作したりできます。 (HTMLDOM は HTML を操作するためのより便利で素早い方法を提供します)


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

<スクリプト>
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(テーブル);
};
</スクリプト>

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

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

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

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

テーブルは比較的複雑で階層が多いため、特定の要素を取得するためだけに以前に学習した DOM を使用すると非常に不便です。そのため、HTMLDOM を使用するとはるかに明確になります。


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

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); //テーブル本体のコレクションを取得する
};

<thead> と <tfoot> はテーブル内で一意であり、1 つしか存在できません。ただし、<tbody> は一意ではなく、複数の要素を持つことができるため、最終的に返される <thead> と <tfoot> は要素参照となり、<tbody> は要素コレクションを返します。


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

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); //セルの内容を削除します。これはセルを削除するのと同じで、次の内容が入力されるはずです。
};
</スクリプト>

5. HTMLDOMはテーブルを作成する


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

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() などの特定の関数を記述することもできます。

<<:  CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

>>:  MySQL DEFINER の使用方法の詳細な説明

推薦する

MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル

MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

CSS3 を使って本のページめくり効果を実現するサンプルコード

重要なポイント: 1. CSS3 3Dアニメーションをマスターする2. ページめくり後のページ内容の...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

MySQL テーブルの読み取り、書き込み、インデックス作成、その他の操作の SQL ステートメントの効率最適化の問題を分析します。

前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

HTML で Web ページに動的な時計を書く

HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...

Nginx で HTTPS 証明書を構成する詳細なプロセス

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

Vue cli開発に基づく外部コンポーネントVantのデフォルトスタイルの変更の詳細な説明

目次序文1. 少ない2. コンポーネントをインポートする3. 設定ファイルを変更するステップ1: l...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

Mysqlは日付範囲の抽出方法を指定します

データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

LinuxシステムにおけるMySQLの一般的な操作コマンド

仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...

MySQL サービスとデータベース管理

目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...

Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...