table１５ ■可変■　tableバナー並べ　　　　UP日時 : 2015/01/30

データ項目が３個の、JavaScriptの可変tableです。今回は、データにタグは使用できません。
■データを記述するだけで、１行に複数のサイトのリンクが作成できます。
・バナー画像マウスオンで、サイト名が出ます。
・バナー画像をクリックするとリンク先に飛びます。
・もしバナー画像が無い時は、サイト名が画像の代わりに表示されます。
・横列、縦行の変更が数値変更するだけで可能。

---

今回の「可変table」のJavaScriptは、いままでの「自動table」とは、tableの作成方法が違います。

１. 最初にtableのセルの数を考えて、縦と横の指定をする
最初に表示したいデータの数を考えます。今回の見本では８個です。
バナー画像のサイズを考えて、１行に３個表示させるには、横列３×縦行３＝９で、９個のセルを持つtableが必要です。
なので、最初にtableのセルの数を指定します。今回の見本では、
var col=3;//★横に並べる列の数
var row=3;//★縦に並べる行の数
です。しかし、横に４列、縦に２行で４×２＝８としてもかまいません。その場合は、
var col=4;//★横に並べる列の数
var row=2;//★縦に並べる行の数
と修正して下さい。
◆◇◆　実際には、var row=●;の縦の行の数は、キッチリではなく多めに指定しても大丈夫です。何もデータの無い行は、表示自体がされません。データのある行だけ表示されます。その代りデータの数より縦の行が少ないと、表示しきれないデータがでてきます。◆◇◆

JavaScriptでは作成したtableのセルに（見本では９個のセル）１行目の左端から右端、次に２行目の左端から２行目の右端、 そしてその次の行の左端から右端・・・という順番で、セルに連番の番号を付けていきます。
その後、データ行に指定された順番に合わせて、その連番のセルに同じ順番のデータを表示していくのです。

見本では８個のデータしかないので、９個のセルは１個余ります。余ったセルは何も表示しない空白になります。
それから途中のデータ行を削除すると、そのデータを表示していたセルは空白にはならず、次のデータがドミノ式に詰めていきます。
この形式では、最後の方のセルが空白表示されることはあっても、途中のセルが空白になることはありません。

２. tableのセルのデータ記述方法
１行の中に記述するデータは３個です。そして、下記の順番を必ず守って下さい。
Tga[k++]=["画像","サイト名","サイトURL"];
この横に並ぶ順番を間違うと、正しく表示されません。 もちろんいままでどおり、縦の行の入れ替えは自由にできます。
Tga[k++]=["frc11.gif","Dynamic Drive","http://www.dynamicdrive.com/"];
　　　：
　　　：
Tga[k++]=["","オリジナルJavaScript","http://jun88.6.ql.bz/"];
上記が今回の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に背景色を指定してみるとわかります。

---

他のJavaScriptとの記述の違い
項目が１個だけでも複数でも、このtableのJavaScriptは、他の当サイトのJavaScriptと大きく違う点があります。
それはデータ番号を記述する場所に、数字が入ってない点です。普通は
Tga[0]=〜〜〜
Tga[1]=〜〜〜
Tga[2]=〜〜〜
と、数字が入っているところが、
Tga[K++]=〜〜〜
Tga[K++]=〜〜〜
Tga[K++]=〜〜〜
となっています。
これは行の入れ替えを簡単にするためです。数字を入れていると、下の行を上にしたり途中の行を丸ごと削除した時には、番号を付け直す必要があります。

じゃあ、他のJavaScriptもそうすればいい？
いえいえ、たとえばコメント付きの簡単スライドショーの場合を考えてみて下さい。
数字を付けることで、ga[0]の画像にmes[0]のコメントが記述しやすくなります。
数字が無いと間違えて ga[3]の画像に、mes[4]のコメントを付けてしまったりします。間違えた場合、どの行を間違ったのかの把握も難しいです。
でも画像だけのスライドショーの場合は、ga[i++]で記述してあれば、最新の画像を一番上に記述して、数字を書き直す必要がないというメリットはあります。
ケース・バイ・ケースでどうぞ。
tableの場合も、「行の入れ替えや削除をする必要が全くない」か、「入れ替えたり削除したら、自分で数字を書き直す」のであれば、
Tga[0]=〜〜〜
Tga[1]=〜〜〜
Tga[2]=〜〜〜
と記述しても、大丈夫です。

---

なお参考にしたサイトがたくさんあります。代表的なものを２つだけ紹介します。
行と列を指定してtableを作る方法は、HAKUHIN's home pageから。
２次元配列に連番を付ける方法は、＠ITから。