sae-suki-blog.

JavaScriptの話：CSVファイルからHTMLのテーブル表示する

by

アップロードしたCSVファイルを読み込んでHTMLのテーブル表示するJavaScriptを作成しました。まあ、ぶっちゃけ色んな人が作っているので何を今更って感じなのですが(-_-;)

逆に言うと、私のソースも他の誰かの参考になればいいなぁと思う次第なのですね(-。-)y-゜゜゜

コードの説明やらなんやらは全部次回に回して、今回はとりあえず使い方のみ。

参考

ソース全文はこちら

source – JavaScriptの話：CSVファイルからHTMLのテーブル表示する

利用させていただいた外部関数

csv.js: ES5 規定の JSON と同じインターフェースを持つCSVパーサ

注：内部処理で以下のサイトの「csv.js」と言うJavaScriptを利用しています。このJavaScriptはカンマ区切りのCSVを配列に分割してくれるとても便利な奴です。感謝(^^)/

使用例

JavaScriptの読み込み

「csv.js」と「csv2table.js」は、適当にアップロードして読み込んでください。

サンプルファイル

「csv2table_test1.csv」と「csv2table_test2.csv」は、適当にアップロードしてください。

csv2table_test1.csv

NO.,都道府県,収穫量(t)
1,新潟県,"646,100"
2,北海道,"588,100"
3,秋田県,"526,800"
4,山形県,"404,400"
5,宮城県,"376,900"

csv2table_test2.csv

NO.,都道府県,収穫量(t)
1,北海道,"44,900"
2,青森県,"17,400"
3,岩手県,"29,500"
4,宮城県,"7,440"
5,秋田県,"8,490"

text/cssでのスタイル指定

その1.普通に読み込んで表示する。

<h2>コメ生産量</h2>
<section class="csv2table" data-src="ファイルURL1"></section>
<h2>キャベツ生産量</h2>
<section class="csv2table" data-src="ファイルURL2"></section>

上記の記述で以下のようにCSVをテーブル表示します。複数テーブルの表示が可能になるように作成してあります。

その2.スタイルを指定して表示する。

<style type="text/css">
<!--
  table.csv2table thead th {
    border-bottom: 3px double #000;
  }
  table.csv2table tbody td {
    border: 1px solid #000;
    padding: 0.25em;
  }
-->
</style>
<h2>コメ生産量</h2>
<section class="csv2table" data-src="ファイルURL1"></section>
<h2>キャベツ生産量</h2>
<section class="csv2table" data-src="ファイルURL2"></section>

上記の記述で以下のようにCSVをテーブル表示します。「table.csv2table」でスタイル指定できます。

その3.スタイルを個別に指定して表示する。

<style type="text/css">
<!--
  table.csv2table thead th {
    border-bottom: 3px double #000;
  }
  table.csv2table tbody td {
    border: 1px solid #000;
    padding: 0.25em;
  }
  table.csv2table.rice tbody tr:hover {
    background-color: #fcc;
  }
  table.csv2table.cabbage tbody tr:hover {
    background-color: #cfc;
  }
-->
</style>
<h2>コメ生産量</h2>
<section class="csv2table" data-label="rice" data-src="ファイルURL1"></section>
<h2>キャベツ生産量</h2>
<section class="csv2table" data-label="cabbage" data-src="ファイルURL2"></section>

上記の記述で以下のようにCSVをテーブル表示します。「data-label」でラベル指定することで、複数テーブルのスタイルを個別に指定できます。
（分かり辛いですが上記のスタイルはカーソル選択時のみ背景色を変えるサンプルです。コメはピンク、キャベツはライトグリーンで反転されます。）