データ項目が複数の、JavaScriptの自動作成のtableです。データにはタグが使用できます。
■今回のJavaScriptでは 並べたデータに左側の項目を付け、データの前に赤と黒の●を付けています。
それ以外の前回Ａとの違いは、CSSでの装飾の違いです。それから見やすいように、横並びの６個目のデータを削除して５個に修正しました。
------------------------------------------------●と●（影付きの赤丸）の付け方
前回Ａでは全部のデータは＜td＞＜/td＞で囲んでありましたが、今回は、左側の列だけ項目欄として、＜th＞＜/th＞で囲んであります。
今回は、データの前に●が付いています。これは全部のデータに１個１個付けるのではなく、JavaScriptの中で指定します。
まずは左側の項目欄の文字に付けた●の指定方法は、
ttt+="<th>●"+Tco[i][0]+"</th>"; //■左項目のデータ
↑の行の●です。この後ろの"+Tco[i][0]+"は、左項目のデータ文字を表しています。このデータ文字の前に、●を付けると、tableの左側の文字に全部●が付きます。これは「★」でも「＊」でも「・」でもかまいません。
この●が不要なら削除して
ttt+="<th>"+Tco[i][0]+"</th>"; //■左項目のデータ
として下さい。
このまま使用すると●が付いたままになります。
------------------------------------------------
次に、それ以外の全部のデータに付いた●（影付きの赤丸）の指定方法です。
ttt+="<td><span style='color:red; text-shadow:1px 1px 2px #666;'>●</span>"+Tco[i][j]+"</td>"; //■左項目以外のセルのデータ
影付きの赤い●を指定しているので少し長いですが、<span style='color:red; text-shadow:1px 1px 2px #666;'>●</span>が指定部分になるので、この部分を削除して、
ttt+="<td>"+Tco[i][j]+"</td>"; //■左項目以外のセルのデータ
とすれば、赤い●は削除されます。"+Tco[i][j]+"は、左項目以外のセルのデータ文字を表しています。
下の方のJavaScriptのソースは、●付きと、●を削除した分の二通りを用意しました。
１．位置指定の方法
いろいろと面倒なので、今回から位置指定は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で位置指定する方が、簡単なのです。
ただし、サイトによっては、表示領域本体の横サイズを900pxとか80%とか、指定されているところも有ります。
そんなサイトでは、上記のような横サイズがわからないという大きなtableの作成方法では困られると思います。
その場合はtableの#Tbに、width:850px;とかwidth:90%;（%指定の場合、本体80%の中の90%という意味）を指定して下さい。
こうすれば、セルの中身が表示しきれない部分は自動的に改行します。
#wakuTと#Tbの関係は、ためしに#wakuTに背景色を指定してみるとわかります。
２．tableのセルのデータ記述方法
Tco[i++]=["マウス","キラキラ星","小さなキラキラ星","ハートでハート","文字で文字","回転する文字"];
：
：
Tco[i++]=["合体","マウスのスライドショー","画像が流れるスライドショー","画像が流れるフェードのスライド","動く背景に泡が上る","動く背景に雪が降る"];
上記が今回のデータの記述です。
見本では["Ａ０","Ａ１","Ａ２","Ａ３","Ａ４","Ａ５"];と、横１行に６個のデータが並んでいます。次の行は
["Ｂ０","Ｂ１","Ｂ２","Ｂ３","Ｂ４","Ｂ５"];
["Ｃ０","Ｃ１","Ｃ２","Ｃ３","Ｃ４","Ｃ５"];
：
：
["Ｇ０","Ｇ１","Ｇ２","Ｇ３","Ｇ４","Ｇ５"];
JavaScriptではデータ番号は１ではなく０から始まるので、この例では横に６個のデータが並んでいます。
この６個の指定は、自由に変更できます。ただし、それぞれの縦に並んだ行は、同じ個数のデータで揃えなければなりません。
上の行は６個、２行目は４個、３行目は５個なんてことはできません。
縦の行ももちろん増減可能です。見本は７行ですが、３行でも２０行でも可能です。
５個で作成したけど、最後の行は３個しかないなら、
["Ｇ０","Ｇ１","Ｇ２","",""];
７個で作成したけど、２行目の３個目のデータを削除したいなら、
["Ｂ０","Ｂ１","","Ｂ３","Ｂ４","Ｂ５","Ｂ６"];
データが無い部分は "" を記述して、個数を揃えて下さい。 "" の部分は空白で表示されます。
他のJavaScriptとの記述の違い
項目が１個だけでも複数でも、このtableのJavaScriptは、他の当サイトのJavaScriptと大きく違う点があります。
それはデータ番号を記述する場所に、数字が入ってない点です。普通は
Tco[0]=〜〜〜
Tco[1]=〜〜〜
Tco[2]=〜〜〜
と、数字が入っているところが、
Tco[i++]=〜〜〜
Tco[i++]=〜〜〜
Tco[i++]=〜〜〜
となっています。
これは行の入れ替えを簡単にするためです。数字を入れていると、下の行を上にしたり途中の行を丸ごと削除した時には、番号を付け直す必要があります。
じゃあ、他のJavaScriptもそうすればいい？
いえいえ、たとえばコメント付きの簡単スライドショーの場合を考えてみて下さい。
数字を付けることで、ga[0]の画像にmes[0]のコメントが記述しやすくなります。
数字が無いと間違えて ga[3]の画像に、mes[4]のコメントを付けてしまったりします。間違えた場合、どの行を間違ったのかの把握も難しいです。
でも画像だけのスライドショーの場合は、ga[i++]で記述してあれば、最新の画像を一番上に記述して、数字を書き直す必要がないというメリットはあります。
ケース・バイ・ケースでどうぞ。
tableの場合も、「行の入れ替えや削除をする必要が全くない」か、「入れ替えたり削除したら、自分で数字を書き直す」のであれば、
Tco[0]=〜〜〜
Tco[1]=〜〜〜
Tco[2]=〜〜〜
と記述しても、大丈夫です。
なお参考にしたサイトがたくさんあります。代表的なものを４つだけ紹介します。
セルの背景色の２色カラーは、イヌでもわかるJavaScript講座から。
table作成をinnerHTMLで記述する方法は、OKWaveのzousan77さんの回答から。
データの項目のまとめ方は、無数のJavaスクリプトサンプル(SCRIPT OF ANGER)日本旭日党から。
配列の要素に別の配列リテラルを格納して多次元配列のように扱う方法は、AjaxTowerから。
|
◆ ●付きデータの全ソース◆ |
◆ ●無しデータの全ソース◆ |