- ベストアンサー
データバインドを利用したCSVファイルからの画像表示スクリプト例
- CSVファイルからの読取についてのスクリプト例を紹介します。データバインドを利用して、CSVファイルに記入された画像名を取得し、それを表示させることができます。
- CSVファイルのレコード数分、ループして画像とデータを表示するため、表示が重複することがあります。ループしないようにするには、条件分岐を加える必要があります。
- 以下のソースコードは、データバインドを利用したCSVファイルからの画像表示スクリプト例です。ソースコード内の条件分岐を調整することで、ループしないようにすることができます。
- hajimete-san
- お礼率60% (35/58)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
うーん。イマイチ何が望まれているのか良くわからん。 後述の通り、わかりやすく書いてくれ。 俺の環境ではエラーが出てマトモに動かなかったので 当方の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); } となる。
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
もう一箇所 /* if(Cnt++ % 3 == 0 && Cnt > 0){ */ ここは不要。 /* if(Cnt++ % 3 == 0 && Cnt > 0){ ここは不要。*/ まぁどのみち、 コメントだから行ごと削除してもらってもかまわないんだけど。
- himajin100000
- ベストアンサー率54% (1660/3060)
#やべ、ミスった。 img/a01.jpg じゃなくてimg要素が表示されるんだった(俺の検証時は面倒くさくて画像を作っていないのでつい。まぁそれでもalt属性は空文字列なのでやっぱり俺の記述はおかしいのだけれど。)
お礼
himajin100000さん、無事うまく出来ました！ ありがとうございます。 また何かありましたら、よろしくお願いします。
補足
himajin100000さん、早速の書き込みありがとうございます。 説明不足ですみません。表示する結果なのですが、まずimg/a01.jpgという部分はimgフォルダの画像のパスをCSVファイルのセルに記述して、その画像を表示させ、ほかは画像のコメント情報として表示させる感じです。 ですので、|画像|コメント1|コメント2 という形のがレコード分表示するというものです。しかしながら自分が参考したソースでやるとレコード分ループして表示になってしまいます。（レコードが3なら、同じレコードが3つ、3回出てきちゃいます） 1,2,3 1,2,3 1,2,3 みたいな感じになっちゃいます。 これを 1,2,3 と一回だけ表示させたいのです。 himajin100000さんのソースを早速試してみたいと思います。 ありがとうございます。