よろしくお願いします。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ベストアンサー
- 回答日時:
#1です。
先の回答をする時に確認してわかっていたんですが書くの忘れてました^^;。
タグの対応がおかしいです。(</table>で閉じるのが早い)
tbl += "</tr></table>";
↓
tbl += "</tr>";
tbl += "</table>";//追加(ループの外)
steel_gray様、再度ありがとうございます。
無事出来ました。感謝です。
こうしてみるとちょっとしたことなんですね・・。
本当にありがとうございました。
また何かあったときはよろしくお願いします。
No.1
- 回答日時:
var retu=0; の位置が違う。
もう一つ内側のループで初期化しないと、2回目からは既に「3」になってるのでwhileループを処理せず終わってしまいます。
この回答への補足
steel_grayさん、書き込みありがとうございます。
ご指摘どおり、var retu=0;をwhile(retu<3){ の上行に移動させたところ、残りのレコードが表示されるようになりました。
これまた指摘された初期化がうまくいってないため、3列ではなく1列でループしてます。
恥の上塗りですみません、どのポイントで初期化すればうまく行くのでしょうか??
初心者の僕の考えとして、
while(retu<3){ の「retu」が3のままになってるような気がします。
でも
var retu=0;
while(retu<3){
となっていれば、while(retu<3){ のループが終わった時点で
var retu=0;で初期化されるのでは??と思ってしまいます。
それとも全く別のところを初期化しないといけないのでしょうか?
質問ばかりですみません。よろしくお願いします。
自分もがんばって自己解決できるよう色々試してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
プルダウンで選択すると、DBの...
-
javascriptで質問です。 displa...
-
マウスをブラウザの外に出した...
-
jsで質問です。 displayプロパ...
-
tableの任意行にfocusをあてる
-
Select ボックスで選択した値を...
-
マウスオーバー時テーブルの背...
-
添付画像のようなhtmlとcssのス...
-
EasyUIのSubGrid(jquery)にお...
-
ハイパーリンクを別ウインドウ...
-
JavaScriptでテーブルをクリッ...
-
javascript クリックすると、あ...
-
正規表現で任意の文字列が含ま...
-
ラジオボタンとセルの連動
-
特定<table>内の<td>の色を変える
-
【JQuery】テーブルで行選択さ...
-
チェックボックスにチェックが...
-
至急!GetElementById でtdの...
-
テーブル列の表示・非表示機能...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
クリックされた罫表セルの行番...
-
HTML中のTABLEのデータを抽出す...
-
マウスをブラウザの外に出した...
-
jquery datatablesを使用 イン...
-
至急!GetElementById でtdの...
-
プルダウンで選択すると、DBの...
-
スクロールバーの表示位置を変...
-
特定の文字列を挿入
-
テーブル列の表示・非表示機能...
-
javascript クリックすると、あ...
-
テーブルで複数行をまとめて非...
-
テーブルの変数について
-
テーブルの項目の値取得
-
JavaScriptでテーブルをクリッ...
-
Selenium.ChromeDriverの使い方...
おすすめ情報