table１１ ■自動■　table項目複数Ｄ

データ項目が複数の、JavaScriptの自動作成のtableです。データにはタグが使用できます。
■今回のJavaScriptでは、左側に自動で番号を付け、上側に項目を付け、縦の行単位で背景色を変更しています。
それ以外の前回Ｃとの違いは、CSSでの装飾の違いです。

---------------------●前回Ｃとの２色背景色の出方の違いと、上項目の記述位置の違い
前回は２番目指定の背景色が最初に出ました。今回は背景色指定の順番通りに出ます。
原因は左側に自動で連番の番号を入れるために、上項目の部分をデータ記述から削除して、JavaScriptの中のtable組立部分で記述するように変更したからです。
---------------------●番号の設定方法と番号の背景色指定
番号については、ただ数字を出すだけなら何も記述する必要はありません。
数字だけでなく、1番、2番、3番・・・とか第1号、第2号、第3号・・・とか文字を組み合わせたいならtable組立部分に記述が必要です。
その見本は次回Ｅで説明します。
番号はデータ記述の順番で自動で付けられるので、データの行を入れ替えるだけで、自動で変更します。
だから上項目を、データ記述から削除する必要があったのです。
今回は番号の背景色も、他のセルと同じように２色のツートンカラーです。
もし番号の背景色だけ、独自に指定したい時は、CSSで指定して下さい。
#Tb th{…}の部分に、background:●;の１行を追加します。次回Ｅはその方法で作成します。

１．位置指定の方法
いろいろと面倒なので、今回から位置指定は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++]=["キラキラ星","自動スライド超簡単","雪が降る(全面＆範囲)","星が踊る -ぱーぷりん-","ランダム背景body・左端"];
　　　：
　　　：
Tco[i++]=["回転する文字","クリックでスライド","キラキラ星が降る","ふわふわ天使","ランダムスライドbody・左端"];
上記が今回のデータの記述です。
見本では["Ａ０","Ａ１","Ａ２","Ａ３","Ａ４"];と、横１行に５個のデータが並んでいます。次の行は
["Ｂ０","Ｂ１","Ｂ２","Ｂ３","Ｂ４"];
["Ｃ０","Ｃ１","Ｃ２","Ｃ３","Ｃ４"];
　　　：
　　　：
["Ｇ０","Ｇ１","Ｇ２","Ｇ３","Ｇ４"];
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 ;/*★中央指定*/
font-size:80%;/*★tableの文字サイズ*/
color:#000;/*★table全体の文字色　黒*/
border-collapse: collapse;/*★セルの隙間を空けない*/
}

#Tb thead th{
background:#bbe;/*★上項目の背景色　青紫色*/
}

#Tb th{
padding:5px;/*★セルと番号、セルと上項目の隙間*/
border:1px solid #888;/*★セルの枠線　濃い灰色*/
}

#Tb td{
padding:5px 10px;/*★セルと文字の隙間　上下、左右*/ 
border:1px solid #888;/*★セルの枠線　濃い灰色*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>

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


<script type="text/JavaScript">
<!--
/*====================================================================
★自動table　項目複数・番号付き・上項目付き・左項目無し：2015/01/26
参考サイト：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++]=["キラキラ星","自動スライド超簡単","雪が降る(全面＆範囲)","星が踊る -ぱーぷりん-","ランダム背景body・左端"];
Tco[i++]=["小さなキラキラ星","自動スライド、コメ付き","ハートが上る(全面＆範囲)","ひまわり娘 -ぱーぷりん-","ランダム背景box・全面"];
Tco[i++]=["ハートでハート","開始、停止ボタン付き","粉雪が降る","蝶が舞う -Kurt Grigg-","スライド背景body・上端"];
Tco[i++]=["文字で文字","開始、停止、コメ付き","激しい粉雪","サンタが飛ぶ(範囲指定)","スライド背景box・右端"];
Tco[i++]=["回転する文字","クリックでスライド","キラキラ星が降る","ふわふわ天使","ランダムスライドbody・左端"];

var Tbc= new Array("#fee","#fde"); /*★セルの背景色指定。２色指定。,"●"を付けて色を追加すれば何色でも可*/

var ttt="<table id='Tb'><thead><tr>";

/*★★↓上項目欄はここで記述。この上項目欄は増加させる時は<th>●●</th>で。削除も<th></th>を含めて削除*/
var tth="<th>No</th><th>マウス</th><th>スライド</th><th>画像が降る上る</th><th>画像ふわふわ</th><th>動く背景</th>";

ttt+=tth;
ttt+="</tr></thead><tbody>";
for (i=0; i<Tco.length; i++){      　　 /*■行のループ指定。上項目はデータから削除したので i=0 です*/
ttt+="<tr style='background:"+Tbc[i%Tbc.length]+";'>";  　//■行の背景色指定。色指定の１番目から交互に出ます
ttt+="<th>"+(i+1)+"</th>";　　　　　　  //■番号指定
for (j=0; j<Tco[i].length; j++){   　　 /*■セルのループ指定*/ 
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/26

　table１１ ■自動■　table項目複数Ｄ　　　　UP日時 : 2015/01/26