• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • 日記
  • 競馬でプログラミング
    • JV-LinkをC#で使ってみる(WinForms版)
    • JV-LinkをC#で使ってみる(Console版)
  • このはとウェブログ
    • JavaScriptの話
    • WordPressの話
  • 私のバヌーシー出資馬について

sae-suki-blog.

  • メール
  • Instagram
  • RSS
  • Twitter

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

2020-09-02 by さえきさん

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

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

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

目次

  • 参考
    • ソース全文はこちら
    • 利用させていただいた外部関数
  • 使用例
    • JavaScriptの読み込み
    • サンプルファイル
      • csv2table_test1.csv
      • csv2table_test2.csv
    • text/cssでのスタイル指定
      • その1.普通に読み込んで表示する。
      • その2.スタイルを指定して表示する。
      • その3.スタイルを個別に指定して表示する。

参考

ソース全文はこちら

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」でラベル指定することで、複数テーブルのスタイルを個別に指定できます。
(分かり辛いですが上記のスタイルはカーソル選択時のみ背景色を変えるサンプルです。コメはピンク、キャベツはライトグリーンで反転されます。)

Filed Under: JavaScriptの話, このはとウェブログ 関連タグ:JavaScript

最初のサイドバー

More to See

csvファイルの配列化がおかしい、、、

2020-09-11 By さえきさん

エターナルハートが転厩するのはまあいいとして、、、

2020-09-09 By さえきさん

フォルダー構成のみなおしがメンドイ( 一一)

2020-09-09 By さえきさん

Tags

C# ConoHa WING CSS Genesis JavaScript JRA-VAN Magazine Pro THE THOR WordPress エターナルハート ギエナー2019 バヌーシー フランクエトワール 競馬

Categories

  • このはとウェブログ (3)
    • JavaScriptの話 (2)
    • WordPressの話 (1)
  • 日記 (17)
  • 競馬でプログラミング (14)
    • JV-LinkをC#で使ってみる(Console版) (6)
    • JV-LinkをC#で使ってみる(WinForms版) (7)

Footer

Profile

avatar
初音ミクが大好きな40代のおじさんです。
最近、バヌーシーで一口馬主を始めました。

Search

Copyright © 2021 · Magazine Pro on Genesis Framework · WordPress