CSVファイルからの読取について

解決済

質問者：hajimete-san
質問日時：2007/07/13 11:21
回答数：3件

よろしくお願いします。

データバインドを利用し、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">

</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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： himajin100000
回答日時：2007/07/13 12:52

うーん。

イマイチ何が望まれているのか良くわからん。
後述の通り、わかりやすく書いてくれ。

俺の環境ではエラーが出てマトモに動かなかったので
当方の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さんのソースを早速試してみたいと思います。
ありがとうございます。

補足日時：2007/07/13 15:11

通報する