table18 ■可変■ tableリンク無し文字    UP日時 : 2015/02/06


「その他17■table■可変tableリンク付き文字」と同じ構造のJavaScriptですが、スッパリとデータは「文字のみ」
リンク指定もマウスオンで出るtitle文字指定もありません。
そのため文字の位置に画像を入れる場合は、<img src='●'>とタグを入れ、リンク指定も<a href='〜〜'>●</a>とタグを入れ、マウスオンで出るtitle文字が必要なら、それもタグで入れる必要があります。
他の自動、可変tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。

それなら「その他10■table■自動table項目複数C」と同じように見えますが、最大の違いは、横の列、縦の行の指定が簡単にできること。
見本は横3×縦3の指定(上項目部分は含みません)ですが、数値を変更するだけで、横1×縦9とか横2×縦5(余ったセルは空白表示)のtableになります。
そして、上項目部分は不要なら簡単に削除できます。構造上、左項目部分を入れることはできません。

データ項目が1個の、JavaScriptの可変tableです。データにタグが使用できます。
■リンクや画像を指定するには、データにタグを記述しなければなりません。
・タグ記述が必要な代わりに、自由度が高い。
・データが1個なので、長文のデータの記述が簡単。
・横列、縦行の変更が数値変更するだけで可能。


1. 最初にtableのセルの数を考えて、縦と横の指定をする
最初に表示したいデータの数を考えます。見本は9個(上項目部分は含みません)なので、
var col=3;//★横に並べる列の数
var row=3;//★縦に並べる行の数

セルを横1×縦9で並べることも可能ですし、横2×縦5にすることもできます。この2つの数値を修正するだけです。余ったセルは空白表示になります。
◆◇◆ 実際には、var row=●;の縦の行の数は、キッチリではなく多めに指定しても大丈夫です。何もデータの無い行は、表示自体がされません。データのある行だけ表示されます。その代わりデータの数よりセルの数が少ないと、表示しきれないデータがでてきます。
上項目部分は横の列の数に合わせて調整するか、削除して下さい。◆◇◆

2. tableのセルのデータ記述方法
1行の中に記述するデータは1個です。Tga[k++]=["文字"];という形になります。
もちろんいままでどおり、データの入れ替えは自由にできます。
Tga[k++]=["<a href='../../index.html'><img src='usi5.gif'></a><br>◇現在のブラウザのバージョン&チラつき<br>◇HTMLのドキュメントタイプ<br>◇CSSの記述(接頭語)について<br>◇JavaScriptのコピペの方法<br>◇著作権について<br>◇GF作品について<br>◇ページ内参考リンク"];
   :
   :
Tga[k++]=["<a href='../../link.html'>リンク</a><br>◇JavaScript<br>◇フリー写真主体<br>◇サイト用素材<br>◇画像、絵画<br>◇その他"];


上記が今回のtableのデータの記述です。
他の自動、可変tableと同じく、データにタグを記述する時は、「"」ではなく「'」を使用します。


3.位置指定の方法
いろいろと面倒なので、位置指定は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との記述の違い
項目が1個だけでも複数でも、この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]=〜〜〜
と記述しても、大丈夫です。


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