よろしくお願いします。
データバインドを利用し、CSVファイルにて画像名を記入し、それを
表示させるスクリプト例をこのカテゴリで拝見し、試してみました。
問題なく表示できたのですが、CSVファイルのレコード数分、どうしてもループして表示されます。レコード数分ループしないようにするには
どこを注目すればよろしいでしょうか?
以下が参考して、若干手を加えたソースです。
------------------------------------------------------------
<html>
<head>
<title>TEST CSV IN</title>
</head>
<body>
<object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="sample.csv">
<param name="UseHeader" value="true">
</object>
<script language="JavaScript">
<!--
document.writeln("<table border=1 DATASRC='#TEST'><tr>");
TEST.Reset();
var rs = TEST.recordset;
var Cnt = 0;
while (rs.EOF == false){
if(Cnt++ % 3 == 0 && Cnt > 0)
document.writeln("</tr><tr>");
document.writeln("<td><img src=" + rs.fields(0) + "></td>");
document.writeln("<td>" + rs.fields(1) + "</td>");
document.writeln("<td>" + rs.fields(2) + "</td>");
rs.MoveNext;
}
document.writeln("</tr></table>");
-->
</Script>
</body>
</html>
--------------------------------------------------
CSVファイルの内容は以下
img,name,phone
img/a01.jpg,a01,001-001
img/a02.jpg,a02,002-002
img/a03.jpg,a03,003-003
img/a04.jpg,a04,004-004
No.1ベストアンサー
- 回答日時:
うーん。
イマイチ何が望まれているのか良くわからん。後述の通り、わかりやすく書いてくれ。
俺の環境ではエラーが出てマトモに動かなかったので
当方のIE 7で動くよう、コードを書き換えた。
(この仕組みはIEの独自拡張と思われるのでFirefox,Opera,Safari等への対応はしない。
セキュリティは中高に設定した。)
(元々独自拡張なのでDOCTYPEは省略した。自分でDTD作るの面倒くさいし。)
===========================Q3163593-1.html======================
<html>
<head>
<title>TEST CSV IN</title>
<script type="text/javascript">
function hoge(){
var TEST = document.getElementById("TEST");
/* var Cnt = 0; 不要*/
var output = document.getElementById("OUTPUT");
var table = document.createElement("table");
table.setAttribute("datasrc","#TEST");
var tbody = document.createElement("tbody");
var tds = new Array();
TEST.Reset();
var rs = TEST.recordset;
while (!rs.EOF){
/* if(Cnt++ % 3 == 0 && Cnt > 0){ */ ここは不要。
var tr = document.createElement("tr");
tds[0] = document.createElement("td");
tds[1] = document.createElement("td");
tds[2] = document.createElement("td");
var img = document.createElement("img");
img.setAttribute("src",rs.fields(0));
img.setAttribute("alt","");
tds[0].appendChild(img);
tds[1].innerText = rs.fields(1);
tds[2].innerText = rs.fields(2);
tr.appendChild(tds[0]);
tr.appendChild(tds[1]);
tr.appendChild(tds[2]);
tbody.appendChild(tr);
rs.MoveNext;
/*
}
当然不要
*/
}
table.appendChild(tbody);
output.appendChild(table);
}
</script>
</head>
<body onload="hoge();">
<object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="sample.csv" />
<param name="UseHeader" value="true" />
<param name="TextQualifier" value="'">
<param name="FieldDelim" value=",">
</object>
<div id="OUTPUT">
</div>
</body>
</html>
CSVファイル(多少改変)
'img','name','phone'
'img/a01.jpg','a01','001-001'
'img/a02.jpg','a02','002-002'
'img/a03.jpg','a03','003-003'
'img/a04.jpg','a04','004-004'
'img/a05.jpg','a05','005-005'
'img/a06.jpg','a06','006-006'
'img/a07.jpg','a07','007-007'
'img/a08.jpg','a08','008-008'
出力結果
img/a01.jpg a01 001-001
img/a02.jpg a02 002-002
img/a03.jpg a03 003-003
img/a04.jpg a04 004-004
img/a05.jpg a05 005-005
img/a06.jpg a06 006-006
img/a07.jpg a07 007-007
img/a08.jpg a08 008-008
↑こんな感じで希望する出力結果を書いてくれ
一例として
希望出力結果例
img/a03.jpg a03 003-003
img/a06.jpg a06 006-006
を考えるなら
/* (前略) */
var Cnt = 1; /* 0を1にした */
/* (中略) */
while (!rs.EOF){
if(Cnt % 3 == 0 && Cnt > 0){ /* コメント外す。Cnt++をCntにした。 */
var tr = document.createElement("tr");
tds[0] = document.createElement("td");
tds[1] = document.createElement("td");
tds[2] = document.createElement("td");
var img = document.createElement("img");
img.setAttribute("src",rs.fields(0));
img.setAttribute("alt","");
tds[0].appendChild(img);
tds[1].innerText = rs.fields(1);
tds[2].innerText = rs.fields(2);
tr.appendChild(tds[0]);
tr.appendChild(tds[1]);
tr.appendChild(tds[2]);
tbody.appendChild(tr);
} /* コメント外す */
rs.MoveNext; /* 外に出す【重要】 */
Cnt++; /* 単に個人的な見易さの都合でここに移動 */
}
table.appendChild(tbody);
output.appendChild(table);
}
となる。
この回答への補足
himajin100000さん、早速の書き込みありがとうございます。
説明不足ですみません。表示する結果なのですが、まずimg/a01.jpgという部分はimgフォルダの画像のパスをCSVファイルのセルに記述して、その画像を表示させ、ほかは画像のコメント情報として表示させる感じです。
ですので、|画像|コメント1|コメント2 という形のがレコード分表示するというものです。しかしながら自分が参考したソースでやるとレコード分ループして表示になってしまいます。(レコードが3なら、同じレコードが3つ、3回出てきちゃいます)
1,2,3
1,2,3
1,2,3
みたいな感じになっちゃいます。
これを
1,2,3
と一回だけ表示させたいのです。
himajin100000さんのソースを早速試してみたいと思います。
ありがとうございます。
No.3
- 回答日時:
もう一箇所
/* if(Cnt++ % 3 == 0 && Cnt > 0){ */ ここは不要。
/* if(Cnt++ % 3 == 0 && Cnt > 0){ ここは不要。*/
まぁどのみち、 コメントだから行ごと削除してもらってもかまわないんだけど。
No.2
- 回答日時:
#やべ、ミスった。
img/a01.jpg じゃなくてimg要素が表示されるんだった(俺の検証時は面倒くさくて画像を作っていないのでつい。まぁそれでもalt属性は空文字列なのでやっぱり俺の記述はおかしいのだけれど。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- その他(プログラミング・Web制作) python 気象データの取得 2 2023/06/20 23:54
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
画像をランダムな座標に一定の...
-
JavaScriptを外部ファイルにす...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
画像の表示位置
-
JavaScript スライドの画像にリ...
-
ポップアップのソースの書き方...
-
デフォルト非表示にしたい。【t...
-
onclickとonmouseoverを同時に...
-
複数トリガーで動作するアコー...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
ホームページビルダー15 メニュ...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
-
スライダーを実装した場合、ペ...
-
スマートフォンサイトに部分的...
-
jQueryで特定のURLの時のみ表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
JavaScriptでシンプルなスライ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
画像と文字を同時に切り替えたい
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
時間によって表示される画像を...
おすすめ情報