table１０ ■自動■　table項目複数Ｃ

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

------------------●背景色の指定方法。
JavaScriptのソースの中の
var Tbc= new Array("#fff","#fde"); /*★セルの背景色指定。２色指定。,"●"を付けて色を追加すれば何色でも可*/
これが背景色の色を指定する部分です。
#fffは白、#fdeはピンクです。色コードを変更すれば、違う色になります。そして
var Tbc= new Array("#fff","#fde","#ff0");→→白、ピンク、黄色の指定
というふうに別の色を追加すると、３色、４色と増やすこともできます。
３色が交互に繰り返す、４色が交互に繰り返すパターンです。
注意するのは、色は２番目から出るという事。
白、ピンクと指定すると、２番目のピンクが最初に出て、ピンク、白、ピンク、白・・・と繰り返します。
３色で、白、ピンク、黄色と指定すると、ピンク、黄色、白、ピンク、黄色、白・・・という順番になります。
２番目、３番目から１番目に戻ります。４色指定なら、２番目、３番目、４番目、１番目、２番目、３番目、４番目、１番目・・・です。
データの行を入れ替えても、背景色は入れ替える必要はありません。

１．位置指定の方法
いろいろと面倒なので、位置指定は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++]=["キラキラ星","自動スライド超簡単","雪が降る(全面＆範囲)","星が踊る -ぱーぷりん-","ランダム背景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 th{
padding:5px;/*★セルと上項目の文字の隙間*/
border:1px solid #888;/*★セルの枠線　濃い灰色*/
background:#cb7;/*★上項目の背景色　薄茶*/
}

#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/24
参考サイト：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・左端"];

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

var ttt="<table id='Tb'><tr>";
for (j=0; j<Tco[0].length; j++){　 /*■上項目のループ指定*/
ttt+="<th>"+Tco[0][j]+"</th>";     //■上項目のデータ
}                                  //■上項目のループ指定の終了
ttt+="</tr>";
for (i=1; i<Tco.length; i++){　　  /*■行のループ指定。i=0ではなくi=1になる。i=0は上項目の行*/ 
ttt+="<tr style='background:"+Tbc[i%Tbc.length]+";'>";  　//■行にセルの交互の背景色指定

for (j=0; j<Tco[i].length; j++){   /*■上項目以外のセルのループ指定*/ 
ttt+="<td>"+Tco[i][j]+"</td>";  　 //■上項目以外のセルのデータ
}                                  //■上項目以外のセルのループ指定の終了
ttt+="</tr>";
}                                  //■行のループ指定の終了
ttt+="</table>";
document.getElementById("wakuT").innerHTML =ttt;
}
window.onload =myTb;
//-->
</script>
<!--★ここまでコピー-->

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

table１０ ■自動■ table項目複数Ｃ UP日時 : 2015/01/24

　table１０ ■自動■　table項目複数Ｃ　　　　UP日時 : 2015/01/24