データ項目が1個だけの、JavaScriptの自動作成のtableです。データにはタグが使用できます。
最終的には、データ項目が複数のtableができますが、今回は項目が1個だけのtableをいろいろ紹介します。
A〜Fまでの6個と、このメニューのtableを含めて7個あります。
メニューをクリックすると個別のページに行くので、そこのソースをご覧下さい。このページのJavaScriptのソースは、一番下にあります。
とても簡単にtableが作成できる、自動tableのJavaScriptです。
最終的には、背景色が行違いの2色カラー(3色も4色も可能)で、画像やリンクや説明文等の項目が複数あるリンクページができます。
項目が一つだけの場合は番号付きも含めて、tableのセルのデータは下記の通りです。データにはタグが使用できます。
Tco[i++]="<a href='hoka_t1.html'>項目1個・番号無し・上項目無し</a>";
:
:
Tco[i++]="<a href='hoka_t6.html'>項目1個・番号付き・上項目付き・背景色が2色</a>";
データの変更は、このデータの後ろに追加したり、不要なデータを削除したり、順番を入れ替えしたりするだけです。
番号付きの場合も何もしなくても、自動で入れ替えした後の上からの連番になります。
行違いの2色以上の背景色の変更も自動なので、データ入れ替えによる背景色変更は不要です。
<tr><td></td></tr>等を記述する必要は全くありません。とても簡単です。今回は
■項目が一つだけで、英語の番号付き・上項目付きのtableの紹介です。
なお参考にしたサイトがたくさんあります。代表的なものを4つだけ紹介します。
セルの背景色の2色カラーは、イヌでもわかるJavaScript講座から。
table作成をinnerHTMLで記述する方法は、OKWaveのzousan77さんの回答から。
データの項目のまとめ方は、無数のJavaスクリプトサンプル(SCRIPT OF ANGER)日本旭日党から。
配列の要素に別の配列リテラルを格納して多次元配列のように扱う方法は、AjaxTowerから。
◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』