人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptから、CSVファイルの読み込みはできますか?

ローカルのフォルダ内に、html、JS,CSVがあるとして、htmlをブラウザで表示するとします。
このとき、CSVのデータをJSで読み込んで、htmlとして表示したりすることはできますか?

できるなら、どうやってやるのかサンプルを教えてください。

また、できない場合、他に何か方法はあるでしょうか?
XMLは記述が面倒ですし、何か簡単にCSVのようなデータファイルを更新できないものかなと考えています。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSV HTML JavaScript js XML
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● F-15X
●23ポイント

Happy! Happy! Island

http://www.happy2-island.com/vbs/cafe02/capter00205.shtml:title=

2.5 テキストファイルの行単位の読み込み]

2.7 テキストファイルへの書きこみ

など、参考になりますでしょうか。


ただ、ActiveXObject("Scripting.FileSystemObject")

を使用するようですので、ターゲットブラウザはIEと思われます。


個人的には、WSH(Windows Scripting Host)や、HTA(HTML Application)

で仕上げますが。

◎質問者からの返答

ブラウザはあまり制限したくないと考えています。

書き込みの必要はありません。


2 ● susie-t
●23ポイント

だいたいはコメントで回答されている方法でOKだと思うのですが、IE7だとローカル環境でAjaxが使えないので、それでは実現できないと思います。IE7も対象とするなら、以下を参考にしてみてください。

http://d.hatena.ne.jp/susie-t/20071116/1195199667

通常はAjaxを使用し、IE7のみこちらを使用すると良いと思います。

◎質問者からの返答

IE7でローカルでAjaxが使えないことを知りませんでした。

とても為になります。ありがとうございます。


3 ● GoldenDawn
●22ポイント

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>
◎質問者からの返答

ありがとうございます


4 ● calotocen
●22ポイント

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>

------

データ保持用スクリプトとデータ処理用スクリプトを分割するのがポイントです。

これにより,データベースとプログラムの住み分けが可能になると思います。

なお,CGIを使えば,データベースを更新することも可能です。

◎質問者からの返答

このケースでは、csvをエクセルで更新したりができないんですよね。

この方法が見やすく、更新しやすいとは思いますが、欲をいえばエクセルで簡単に更新できればというのがあります。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ