※バナー画像は見本なので、該当サイトの本物のバナーではありません。
●2016/03/05：即時関数で囲んで、グローバル変数を消しました。
横の列、縦の行の指定数値を変更するだけで簡単にtableの形が変えられる可変tableのセルの中に、別の小さなtableを入れました。
大きなtableのセルの中に、小さなtableが１個ずつ入る、入れ子式のJavaScriptです。
小さなtableは、左にサイト名、右に説明文が入ります。
つまり「table２１■table■可変tableに左右の入れ子（画像）」で並べた画像を、サイト名に変更した形です。サイト名は、データにタグを使用すれば画像に変更することもできます。
見本は横３×縦３の指定ですが、数値を変更するだけで、横１×縦８とか横２×縦４のtableになります。
JavaScriptとは無関係ですが、今回CSSで小さなtableに、影と角丸指定を入れてみました。不要なら削除して下さい。
tableに角丸指定をする時の注意点は、セルの隙間を消すための、border-collapse:collapse;は使用しないこと。
セルの隙間を消して角丸指定にする時は、border-spacing:0px;で隙間を消せば、tableの角丸指定が有効になります。
データ項目が３個の、JavaScriptの可変tableです。今回は、今回は、データの１個目の要素「サイト名」と３個目の要素の「サイト説明文」に、タグが使用できます。
■データを記述するだけで、説明文付きのサイト名が、１行に複数作成できます。
・サイト名をクリックするとリンク先に飛びます。
・サイト名の項目にタグで画像を指定すると、サイト名の代わりに画像が表示されます。
・横列、縦行の変更が数値変更するだけで可能。
１. 最初にtableのセルの数を考えて、縦と横の指定をする
最初に表示したいデータの数を考えます。見本は８個なので、
var col=3;//★横に並べる列の数
var row=3;//★縦に並べる行の数
セルを横１×縦８で並べることも可能ですし、横２×縦４にすることもできます。この２つの数値を修正するだけです。余ったセルは空白表示になります。
◆◇◆ 実際には、var row=●;の縦の行の数は、キッチリではなく多めに指定しても大丈夫です。何もデータの無い行は、表示自体がされません。データのある行だけ表示されます。その代わりデータの数よりセルの数が少ないと、表示しきれないデータがでてきます。◆◇◆
２. tableのセルのデータ記述方法
１行の中に記述するデータは３個です。Tga[k++]=["サイト名","サイトURL","サイト説明文"];という形になります。
この３個の記述順番は必ず守って下さい。
もちろんいままでどおり、データの入れ替え、増減は自由にできます。
Tga[k++]=["eWeb","http://javascript.eweb-design.com/index.html","初心者向けに<span style='color:red;'>コピペの注意書き等あり</span>。古いサイトですが、しっかり動くjavascriptに感動。"];
：
：
Tga[k++]=["<img src='pt6s.jpg' title='便利eelife'>","http://eelife.org/java/java_top.html","javascriptサンプル集。『キラキラ星』有り。"];
上記が今回のtableのデータの記述です。
もしもサイト名の代わりに画像を表示する時は、最終行の見本のように画像タグを使って記述して下さい。
いままでの自動、可変tableと同じように、行はいくらでも増加可能です。
他の自動、可変tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。
３．位置指定の方法
いろいろと面倒なので、位置指定はdivの#wakuTではなく、tableの#Tbでします。
そのまえに、この二つの説明をします。
この自動、可変tableは、bodyに＜table id="Tb"＞＜/table＞と記述しても表示しないので、tableを＜div id="wakuT"＞＜table id="Tb"＞〜〜〜＜/table＞＜/div＞で囲む形で表示しています。
ただし、＜table id="Tb"＞〜〜〜＜/table＞の部分はJavaScriptのソースの中に記述してあります。
いろいろな文章の下にこのtableを表示したい時、そのbodyの中の場所に＜div id="wakuT"＞＜/div＞を記述することで、tableの位置指定ができるのです。
ところがdivは、は左から●px、上から●pxという位置指定は簡単ですが、中央配置するには、横幅サイズを指定しないとできません。
サイズ指定ができれば問題ないのですが、大量のデータを並べると具体的なサイズが不明です。
しかしtableは、具体的な横幅がなくても中央配置が可能です。だからtableの#Tbで位置指定する方が、簡単なのです。
#wakuTと#Tbの関係は、ためしに#wakuTに背景色を指定してみるとわかります。
なお参考にしたサイトがたくさんあります。代表的なものを２つだけ紹介します。
行と列を指定してtableを作る方法は、HAKUHIN's home pageから。
２次元配列に連番を付ける方法は、＠ITから。