ローカルのフォルダ内に、html、JS,CSVがあるとして、htmlをブラウザで表示するとします。
このとき、CSVのデータをJSで読み込んで、htmlとして表示したりすることはできますか？
できるなら、どうやってやるのかサンプルを教えてください。
また、できない場合、他に何か方法はあるでしょうか？
XMLは記述が面倒ですし、何か簡単にCSVのようなデータファイルを更新できないものかなと考えています。
No.1
111
13
23pt
http://www.happy2-island.com/vbs/cafe02/capter00205.shtml:title=
2.5 テキストファイルの行単位の読み込み]
など、参考になりますでしょうか。
ただ、ActiveXObject("Scripting.FileSystemObject")
を使用するようですので、ターゲットブラウザはＩＥと思われます。
個人的には、WSH(Windows Scripting Host)や、HTA(HTML Application)
で仕上げますが。
No.2
9918
23pt
だいたいはコメントで回答されている方法でOKだと思うのですが、IE7だとローカル環境でAjaxが使えないので、それでは実現できないと思います。IE7も対象とするなら、以下を参考にしてみてください。
http://d.hatena.ne.jp/susie-t/20071116/1195199667
通常はAjaxを使用し、IE7のみこちらを使用すると良いと思います。
IE7でローカルでAjaxが使えないことを知りませんでした。
とても為になります。ありがとうございます。
No.3
42681
22pt
Ajax 的な手法で CSV ファイルを読み込んでやればいいのではないでしょうか。
CSV にこだわる必要が無いのなら JSON データでもいいですが。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function createXMLHttpRequest(cbFunc) { var XMLhttpObject = null ; try { XMLhttpObject = new XMLHttpRequest() ; } catch (e) { try { XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP") ; } catch (e) { try { XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP") ; } catch (e) { return null ; } } } if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc ; return XMLhttpObject ; } function showData() { if (httpObj.readyState == 4) { dataArray = httpObj.responseText.split("\n") ; tablehtml = '' ; for (i = 0; i < dataArray.length; ++i) tablehtml += '<tr><td>'+dataArray[i].replace(/,/g, '</td><td>')+'</td></tr>' ; document.body.innerHTML = '<table>'+tablehtml+'</table>' ; } } onload = function() { httpObj = createXMLHttpRequest(showData) ; httpObj.open("GET", "./test.csv", true) ; httpObj.send("") ; } </script> </head> <body> </body> </html>
ありがとうございます
No.4
60
22pt
CSVの参照・更新は難しいと思います。
が，下記のような方法で似たようなことを実現できます。
■ data.js
------
var DATA = [
"a","b","c","d",0,
"e","f","g","h","i","j",0
];
------
■ main.htm
------
<html>
<script src="data.js"></script>
<script></p> <p> function main()</p> <p> {</p> <p> for (var i = 0; i < DATA.length; i++) {</p> <p> var str = "";</p> <p> while (DATA[i] != 0) {</p> <p> str += DATA[i++];</p> <p> }</p> <p> alert(str);</p> <p> }</p> <p> }</p> <p> </script>
<body onload="javascript:main()">
</body>
</html>
------
データ保持用スクリプトとデータ処理用スクリプトを分割するのがポイントです。
これにより，データベースとプログラムの住み分けが可能になると思います。
なお，ＣＧＩを使えば，データベースを更新することも可能です。
このケースでは、csvをエクセルで更新したりができないんですよね。
この方法が見やすく、更新しやすいとは思いますが、欲をいえばエクセルで簡単に更新できればというのがあります。
かずぼっくり
2007/11/23 09:54:00
730
719
dingding
2
2
1
ブラウザはあまり制限したくないと考えています。
書き込みの必要はありません。