table１３ ■自動■　table項目複数Ｆ

データ項目が複数の、JavaScriptの自動作成のtableです。データにはタグが使用できます。
■今回のJavaScriptでは、上側に項目、左側にも項目の指定で、番号は付いていません。背景色の２色指定も無しです。

項目のセルは、タグ＜th＞●●＜/th＞指定、通常のセルは＜td＞●●＜/td＞で記述します。二つの違いは、項目のセルは文字が中央配置で太字、通常のセルは文字が左寄せ配置で細字で表示されるところです。

---------------------●参考にしたCSS
今回は自動の番号付きではないので、上項目もデータ表示で指定するため、JavaScript部分はデータを書き込むだけです。
作成するには、とても簡単なtableです。
装飾部分はCSSで指定しますが、装飾は、AllAboutデジタルの「セル全体が立体的に見える表」を参考にしました。
今回のCSSでは　border-spacing: 0px;　で、セルの隙間をなくしています。
当サイトでは、通常はborder-collapse: collapse;　で、セルの隙間をなくしていますが、この見本ではこちらを使用すると、セルが立体的になりません。そこだけ注意して下さい。

１．位置指定の方法
いろいろと面倒なので、今回から位置指定は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++]=["★★★","リング文字のマウス","★盛ります★","上下選択C(全面&範囲&装飾)","打上げ花火(画像)","背景移動　複数設定"];
上記が今回のtableのデータの記述です。
見本では["Ａ０","Ａ１","Ａ２","Ａ３","Ａ４","Ａ５"];と、横１行に６個のデータが並んでいます。次の行は
["Ｂ０","Ｂ１","Ｂ２","Ｂ３","Ｂ４","Ｂ５"];
["Ｃ０","Ｃ１","Ｃ２","Ｃ３","Ｃ４","Ｃ５"];
　　　：
　　　：
["Ｇ０","Ｇ１","Ｇ２","Ｇ３","Ｇ４","Ｇ５"];
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から。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>table１２ ■自動■　table項目複数Ｅ</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
/*★tableの位置と装飾指定用*/
#Tb {
   margin:50px auto;/*★中央指定*/
   border-spacing:0px;/*★セルの間隔をなくす*/
   font-size:80%;/*★文字サイズ指定 */
}

#Tb th, #Tb td {
   border:solid 2px;/*★全部のセルの枠線は実線で太さ2ピクセル */
   padding:5px;/*★全部のセルと文字の隙間*/
}

#Tb thead th {
   border-color:#afd #38a #38a #afd;/*★上項目の枠線。上右下左の各色。薄い青、濃い青*/  
   background:#3de;/*★上項目の背景色。中間の青*/   
}

#Tb tbody th {
   border-color: #fdf #b8a #b8a #fdf;/*★左項目の枠線。上右下左の各色。薄いピンク、濃いピンク*/    
   background: #fcd;/*★左項目の背景色。中間のピンク*/   
}

#Tb td {
   border-color:#fff #aaa #aaa #fff;/*★項目以外のセルの枠線。上右下左の各色。白、灰色*/   
   background: #eee;/*★項目以外のセルの背景色。薄い灰色*/   
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->
<!--★この１行がtableの表示位置です-->
<div id="wakuT"></div>


<script type="text/JavaScript">
<!--
/*====================================================================
★自動table　項目複数・番号無し・上項目付き・左項目付き　：2015/01/27
参考サイト：http://www.red.oit-net.jp/tatsuya/java/table.htm
参考サイト：http://okwave.jp/qa/q8093681.html
参考サイト：http://freett.com/nihonkyokujituto/download/javasc/brolnk5.htm　
参考サイト：http://www.ajaxtower.jp/js/array/index5.html
====================================================================*/
function myTb(){
var i=0;
var j=0;

/*★↓tableのデータ。増減可能。タグが使用可。見本では["●","●","●","●","●","●"]と、横１行に６個のデータが並んでいます。横に並べるデータ数は３個でも１０個でも可ですが、横に並べるデータ数は全行同じに揃えて下さい。データが無い部分は["●","●","●","","●",""]等として、"" を残して数を揃えます。"" の部分は空白で表示されます。*/

var Tco = new Array;
Tco[i++]=["難易度","マウス","スライド","画像が降る上る","画像ふわふわ","動く背景"]
Tco[i++]=["★★☆","キラキラ星","自動スライド超簡単","雪が降る(全面＆範囲)","星が踊る -ぱーぷりん-","ランダム背景body・左端"];
Tco[i++]=["★☆☆","小さなキラキラ星","自動スライド、コメ付き","ハートが上る(全面＆範囲)","ひまわり娘 -ぱーぷりん-","ランダム背景box・全面"];
Tco[i++]=["★★★","ハートでハート","開始、停止ボタン付き","粉雪が降る","蝶が舞う -Kurt Grigg-","スライド背景body・上端"];
Tco[i++]=["★★☆","文字で文字","開始、停止、コメ付き","激しい粉雪","サンタが飛ぶ(範囲指定)","スライド背景box・右端"];
Tco[i++]=["★☆☆","回転する文字","クリックでスライド","キラキラ星が降る","ふわふわ天使","ランダムスライドbody・左端"];
Tco[i++]=["★☆☆","動く時計","クリックでコメ付き","透き通る雪","キラキラ星(画像)","背景サイズ指定スライド"];
Tco[i++]=["★★☆","クリックで星が散る","自動でもクリックでも","蛍の星空","散らばる画像","背景色、背景画像変更"];
Tco[i++]=["★★☆","雪が降るリンク","全部セット","上下選択A(全面&範囲&装飾)","空飛ぶ花のリング","指定日まで背景画像変化"];
Tco[i++]=["★☆☆","回転虹色キラキラマウス","■完成です■","上下選択B(全面&範囲&装飾)","跳ね回る大量ボール","テーブル背景移動"];
Tco[i++]=["★★★","リング文字のマウス","★盛ります★","上下選択C(全面&範囲&装飾)","打上げ花火(画像)","背景移動　複数設定"];

var ttt="<table id='Tb'><thead><tr>";
for (j=0; j<Tco[0].length; j++){　 /*■上項目のループ指定*/
ttt+="<th>"+Tco[0][j]+"</th>";     //■上項目のデータ
}                                  //■上項目のループ指定の終了
ttt+="</tr></thead><tbody>";
for (i=1; i<Tco.length; i++){　　  /*■行のループ指定。i=0ではなくi=1になる。i=0は上項目の行*/ 
ttt+="<tr>";
ttt+="<th>"+Tco[i][0]+"</th>";  　 //■左項目のセルのデータ
for (j=1; j<Tco[i].length; j++){   /*■左項目以外のセルのループ指定。j=0ではなくj=1になる。j=0は左項目の列*/ 
ttt+="<td>"+Tco[i][j]+"</td>";  　 //■左項目以外のセルのデータ
}                                  //■上項目以外のセルのループ指定の終了
ttt+="</tr>";
}                                  //■行のループ指定の終了
ttt+="</tbody></table>";
document.getElementById("wakuT").innerHTML =ttt;
}
window.onload =myTb;
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

table１３ ■自動■ table項目複数Ｆ UP日時 : 2015/01/27

　table１３ ■自動■　table項目複数Ｆ　　　　UP日時 : 2015/01/27