画像を順番にセルへ入れる（空白がある場合）

質問

画像の一覧をテーブルで作成したいです。
画像が増える可能性がありますので、画像が何枚であっても利用できるスクリプトにしたいと考えています。

例えば、画像が12枚の場合、
→横6枚並べるテーブルにすると、空白セルがなくきっちり画像のみでテーブルが完成する。

この場合は、いろんなコードを見よう見まねで下記のように作りました。

Total_set=12;//枚数
Img_Yoko=6;//横に並べる枚数
Img_Tate=Total_set/Img_Yoko;//行数

Kaku=".gif";//拡張子
ImgDir="./img/;//画像格納フォルダ

Str = '<table cellspacing=0>';
Ga_Name=0;//画像の番号セット
for(i=0;i<Img_Tate;i++){
Str += '<tr>';
for(j=0;j<Img_Yoko;j++){
Str +='<td>';
Str +='<img src="'+ImgDir+Ga_Name+Kaku+'" border="0"></td>';
Ga_Name++;
}
Str += "</tr>\n";
}
Str += "</table>\n";

document.write(Str);

汎用性を持たせたいので、6で割り切れない時の処理をどうにかしたいのです。

例えば、画像が15枚に増えた場合、
→横6枚並べるテーブルにすると、3行目が3枚の写真と3個の空白セルになるようにしたい。

この空白セルの処理をどうしたらよいのか・・・悩んでます。余りとかを利用するのかな～？とかも考えたのですが、うまくいきません。

上記のスクリプトの改造、または全然違うやり方でも構いませんので、アドバイスよろしくお願いします。

回答No.1

venzou · ベストアンサー

こんな感じで良いのでは？
（レイアウトの為に全角スペース入れてます。使うときは全角スペースを消してください。）

Total_set=15;//枚数
Img_Yoko=6;//横に並べる枚数
//Img_Tate=Total_set/Img_Yoko;//行数

Kaku=".gif";//拡張子
ImgDir="./img/";//画像格納フォルダ

Str = '<table cellspacing=0>';
Ga_Name=0;//画像の番号セット
while(Ga_Name<Total_set){
　Str += '<tr>';
　for(j=0;j<Img_Yoko;j++){
　　Str +='<td>';
　　if(Ga_Name < Total_set){
　　　Str +='<img src="'+ImgDir+Ga_Name+Kaku+'" border="0"></td>';
　　}else{
　　　Str +='&nbsp;</td>';
　　}
　　Ga_Name++;
　}
　Str += "</tr>\n";
}
Str += "</table>\n";

document.write(Str);

外側のループはwhileにします。Img_Tateは使いません。

if(Ga_Name < Total_set){

このif文で画像の枚数を超えたか判定し、超えなければ画像、超えた場合は空白(&nbsp;)を表示

お礼

ご回答有難うございます。
ご提示頂いたもので希望通りの画像一覧が作成できました！
whileの使い方、改めて勉強になりました。本当にありがとうございました！