prototype.jsを利用して

質問

よろしくお願いします。prototype.jsを使い、
データバインドを利用せず、csvファイルを読込ませ、safariで
表示できるようにサンプルを利用して作成しました。
csvのレコードは400くらいあります。このレコードデータを
テーブル3列の繰り返しで表示したいのですが、以下のソースで
行うようにするとどうしても3列表示したら繰り返しせず
終了してしまいます。
3列表示させる部分の値を変数へ渡してループにすれば出来るような感じがするのですが、そのように想定したものを記述してもどうしても
3列で終了してしまいます。
データバインドで散々質問したのですが、再度お知恵をお借りしたいです。どうかよろしくお願いします。
---------------------------------------------------------------
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
window.onload = function(){
var msec = (new Date()).getTime();
new Ajax.Request("list2.csv", {
method: "get",
parameters: "cache="+msec,
onSuccess:function(httpObj){
var text = httpObj.responseText;
var LF = String.fromCharCode(10);
var tabText = text.split(LF);
var color= "red";
var leng=tabText.length;
var retu=0;
var cnt=0;
var m=0;
var tbl = "<table border='1'>";
var tbb = "<td><table border='1'>";
while(cnt<3){　//試しに3回ループさせてみる
tbl += "<tr>";
var w=m;
var a=w;
var s=w+1;
var f=0;
while(retu<3){ //3列分表示
tbl += "<td><table border='1'>";
for (var i=a; i<s; i++){　
var cText = tabText[i].split(",");
tbl += "<tr><td><img src="+cText[0]+"></td></tr>";
tbl += "<tr><td>"+cText[1]+"</td></tr>";
tbl += "<tr><td>"+cText[2]+"</td></tr>";
tbl += "<tr><td>"+cText[3]+"</td></tr>";
tbl += "<tr><td>"+cText[4]+"</td></tr>";
tbl += "<tr><td>"+cText[5]+"</td></tr>";
}
a=a+1;
s=s+1;
retu++;
tbl += "</table></td>";
}

tbl += "</tr></table>";
cnt++;
m=m+3;
}
$("tableData").innerHTML = tbl+color+leng+a; //変数で表示させたいものをここで宣言
},
onFailure:function(httpObj){
$("tableData").innerHTML = "エラーで読み込めませんでした";
}
});
}
//-->

</script>

回答No.2

steel_gray · ベストアンサー

#1です。
先の回答をする時に確認してわかっていたんですが書くの忘れてました^^;。

タグの対応がおかしいです。（</table>で閉じるのが早い）

tbl += "</tr></table>";
↓
tbl += "</tr>";

tbl += "</table>";//追加(ループの外)

お礼

steel_gray様、再度ありがとうございます。
無事出来ました。感謝です。
こうしてみるとちょっとしたことなんですね・・。
本当にありがとうございました。
また何かあったときはよろしくお願いします。

回答No.1

steel_gray

var retu=0; の位置が違う。
もう一つ内側のループで初期化しないと、２回目からは既に「3」になってるのでwhileループを処理せず終わってしまいます。

補足

steel_grayさん、書き込みありがとうございます。
ご指摘どおり、var retu=0;をwhile(retu<3){ の上行に移動させたところ、残りのレコードが表示されるようになりました。
これまた指摘された初期化がうまくいってないため、3列ではなく1列でループしてます。
恥の上塗りですみません、どのポイントで初期化すればうまく行くのでしょうか？？
初心者の僕の考えとして、
while(retu<3){ の「retu」が３のままになってるような気がします。
でも
var retu=0;
while(retu<3){
となっていれば、while(retu<3){　のループが終わった時点で
var retu=0;で初期化されるのでは？？と思ってしまいます。

それとも全く別のところを初期化しないといけないのでしょうか？
質問ばかりですみません。よろしくお願いします。
自分もがんばって自己解決できるよう色々試してみます。