外部CSVをサイトに読み込み表示できるでしょうか？また値によって背景色を変えるということは可能でしょうか？

Question

外部にあるCSVをサイトに読み込んで表示するということは可能でしょうか？
またCSVを行単位で読み込み、その値によって背景色を自動で変えるということは可能でしょうか？
JavaScript初心者です。どうかご指導宜しくお願いいたします。ｍ＜_ _＞ｍ


CSV例
------------------------
1行目 +10
2行目 -15
3行目 +5
4行目 0


表示例
-------------------------
http://farm4.static.flickr.com/3266/3116370342_2d0374218e_m.jpg

値（＋）: 背景（青）
値（－）: 背景（赤）
値（0）: 背景（黒）

edp3142 · Answer

Web サーバ上で行いたいのでしょうか？
それは難しいと思います。(普通はサーバサイドの言語を使います。)
クライアント限定なら
http://q.hatena.ne.jp/1169003191
あたりが参考になりそうです。

yyr446 · Answer

JavaScriptは外部のファイルを読んだり書いたりする事は出来ない仕様になっています。よって、CSV形式のテキストファイルを直接読み込んで処理するのは不可能です。一番簡単な解決方法は、これです。　CSV形式にこだわらず、データをJAVASCRIPTで記述した下記の様な外部テキストファイルとして、他にも、JSONPとかAJAXを使うとか、あるいはサーバーサイドのプログラムを作るとか、目的によって様々な外部ファイル取得の方法があります。

fujillin · Answer

基本的には不可能です。

IE、windows環境限定でよければJScript使って
データバインドとか
　http://www.makoto3.net/document/databind/databind_all.html
ActiveXObjectでFileSystemObjectを利用するとか
　http://msdn.microsoft.com/ja-jp/library/cc427968.aspx
の方法が、あることはあります。
もっとも、こんなことできるから脆弱なんでしょうけど…

その他の方法については、他の方の回答の通りです。

_pipi_ · Answer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
.ctype0 { background-color:#fdd; }
.ctype1{ background-color:#ddd; }
.ctype2{ background-color:#ddf; }
</style>
<body>
<div id="tb"></tb>
<script type="text/javascript">

var html ='<table border="1">', buf, data, fd=[],css;
if( buf = getFileCSV( 'test.csv' ) ) {
data = buf.split("
");
for( var i=0, m=data.length; i<m; i++){
fd = data[i].split("	");
css = fd[0]<0? 'ctype0':(fd[0]>0?'ctype2':'ctype1');
html+='<tr class="'+css+'">';
for( var j=0,n=fd.length; j<n; j++) html+='<td>'+fd[j]+'</td>';
html+='</tr>';
}
html+='</table>';
document.getElementById('tb').innerHTML = html;
}
function getFileCSV( fileName ){
var ret = '';
new Ajax.Request( fileName + '?d='+(new Date).getTime(), { method:"get", asynchronous : false, onSuccess:function(o){ret=o.responseText;}});
return ret;
}
</script>

_pipi_ · Answer

訂正。

を

に。 prototype.jsでAjaxを使用。CSVファイルはtab区切り "'とかは未処理。レコードの第一項目を判定基準に CSSを決定。ハードルは高い？がんばって！

_pipi_ · Answer

prototype.jsの入手先
http://www.prototypejs.org/download

_pipi_ · Answer

うんだべぇ～　えがったべぇ～！^^;

csvの指定行ですが、一度で全行読み込むことしかできないかも？
すでにdata[x]で指定行のレコードの読み出しができます。

_pipi_ · Answer

cssの設定はに対して設定しています。希望のものを実現するには、に対して行うように変更しなければなりません。もしくは、をの後につけるようにするか・・微妙だな～。レコードの項目はどうなってるの？１つだけ？それとも、1個目は、左寄せ。２個目は右寄せとか？個別にするの？ちと面倒だなぁ～まぁいずれ日があけてからね

_pipi_ · Answer

>一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。サイト上では、列、行に複数並べますが、もしHTML上でユニットとしてレイアウトできるようであれば自由度は高いのかとも

意味がわかりません。
ユニットって何？
まだHTMLで書いてくれたほうが、もしくは理想を画像に
してくれたほうが理解しやすい。
CSVのデータを表にするのではないの？

_pipi_ · Answer

TEST

どうであれタグにIDをふり、それに代入する

例えばとかにして後から代入する

	こんなのとか
	こんなのとか

なんとなく、ずるいような感じだけど・・・。

思っていることを、伝えることは難しいものです。できる限り推測して理解してあげようと回答者の方々は考えていると思いますが、「度が過ぎる」と思うラインが私には存在します。もともと、完成版に近いような、コードを書くこと（丸投げ）を嫌う人が多くいます。でも、自分が勉強する過程で参考になったのはコピペしてまさに動くコードでした。なのでできるだけ動くものを書きたいと思っています。そして「（最初は）解説はしない」です。＞何時間かCSSの設定を書き足して背景の大きさを変えようとしているのですがどうしてもフォントの大きさに比例した程度にしかできません。というのがありました。そこまでやれるのなら、その過程でやっていることを見せてくださいね！　そこから私が学ぶこともあったりします。自分なりに質問に答え、勉強している身なので間違いがあると思います。鵜呑みにはしないようにしてください。

外部CSVをサイトに読み込み表示できるでしょうか？また値によって背景色を変えるということは可能でしょうか？

Web サーバ上で行いたいのでしょうか？

JavaScriptは外部のファイルを読んだり書いたりする事は出来ない仕様に

基本的には不可能です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

訂正。

prototype.jsの入手先

うんだべぇ～ えがったべぇ～！^^;

cssの設定は<tr>に対して設定しています。

>一行の値を背景中央、ボーダー無しで表示し１ユニットとして考えられれば一番かと思っています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

うんだべぇ～　えがったべぇ～！^^;