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 の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...
訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...
重要なポイント: 1. CSS3 3Dアニメーションをマスターする2. ページめくり後のページ内容の...
ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...
前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...
1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...
HTML を使用して動的な Web クロックを作成します。コードは次のとおりです。 <!DOC...
1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...
目次序文1. 少ない2. コンポーネントをインポートする3. 設定ファイルを変更するステップ1: l...
このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...
データベースを操作する過程では、いくつかの指標を日付別にまとめたり、一定期間内の合計金額をカウントし...
システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...
仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...
目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...
プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...