エクセルのCSVデータをホームページに表示させる方法

現状ではイメージの表だしたが、価格相場の変動が激しいので
担当レベルでメンテをしたい要望をうけた。

担当はHP作成の経験はないので、メンテナンスが楽にできるに
こしたことはない。


調べると・・・
CSVデータを読み込んでHTMLページに表示できる記事を見つけた。


おかげさまで無事に設置ができました。


CSVファイルを読み込んでHTMLテーブルを作ってくれるjQueryプラグイン『jquerycsvtotable』 | IDEA*IDEA



【やった作業】

１．『jquerycsvtotable』ページからダウロード



２．ダウンロードしたファイルを解凍すると
サンプルのソース一式がはいっている



３．「test.csv」と「jsフォルダ」、「cssフォルダ」を現状のサイトへコピー





４．サンプルの「index.html」ソース9行目からをコピーして
表示させたいサイトへ貼り付ける

	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
	<script type="text/javascript" src="js/jquery.tablesorter.dev.js"></script>
	
	<script>
	$(function() {
		$.get('test.csv', function(data) {
			$('#CSVSource').html('<pre>' + data + '</pre>');
		});
		$('#CSVTable').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 0 });
		$.get('test.tsv', function(data) {
			$('#TSVSource').html('<pre>' + data + '</pre>');
		});
		$('#TSVTable').CSVToTable('test.tsv', { loadingText: 'Loading TSV Data...', loadingImage: 'images/loading.gif', startLine: 0, separator: "\t" });
		$('#CSVTable2').CSVToTable('test.csv', { loadingImage: 'images/loading.gif', startLine: 1, headers: ['Album Title', 'Artist Name', 'Price ($USD)'] }).bind("loadComplete",function() { 
			$('#CSVTable2').find('TABLE').tablesorter();
		});;
	});
	</script>

５．サンプルの「tesv.csv」のデータが表示されたのを確認。
次は、エクセルでつくったcsvデータを表示させたいので、
一つ前のスクリプト内
「test.csv」を→「自分のファイル名.csv」に変更。
すると表示されなくなった。


６．CSVファイルの文字コードを「UTF-8」に変更する
下記、サイトの補足説明が参考になりました。
外部CSVをHTML内でテーブル表示させる方法
自分のファイル名.csv右クリック→プログラムから開く→Notepad（メモ帳）を開く
ファイル→名前を付けて保存→文字コードの欄の「ANSI」を「UTF-8」に変更
アップロード




無事に表示できるようになりました。