[jQuery]csvファイルをTABLE表示する「csv2table.js」

公開日:  最終更新日:2015/12/10

[jQuery]csvファイルをTABLE表示するjQueryプラグイン「csv2table.js」
以前紹介したTABLEに関する記事


ではTABLEタグを簡単に生成する方法を紹介しました。

本日は、TABLEタグを記述せずに表形式で表示をする方法を紹介したいと思います。

どんな方法かというと
表示したい内容をCSV形式のファイルとして別に準備して、jQueryのプラグインを使って別ファイルのCSVを読み込ませて内容を表形式で表示する方法になります。

スポンサードリンク

CSVファイルをTABLEタグ形式で表示出来る「csv2table.js」

Excelですでに表示したいデータがあるんだけど、それをTABLEタグにはめ込んでいくのは面倒ですよね。

そんな時に、便利なのが本日紹介する方法になります。
TABLEタグとかよく分からないって人も、csvファイルだけ修正すれば表示内容を更新することが出来るかなと思います。

CSVファイルのTABLE表示について

jquery.csv2table.jsのサイトより、ファイルをダウンロードしてください。
55-1.png
「Source」を右クリックして保存「jquery.csv2table-0.02-b-4.3.js」という名前で保存してください。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。


次に表示用のcsvファイルを準備します。
55-2.png
↑↑のようなCSVファイルを準備して、ファイル名を list.csv とします。
(文字コードをUTF-8にする必要があるようです)
必要なファイルをアップロードします。

サンプルソース

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.csv2table-0.02-b-4.3.js"></script>
<script>
$(function(){
$('#table_disp').csv2table('list.csv');
});
</script>
<div id="table_disp"></div>

1行目~2行目 必要なJavascriptファイルを読み込んでいる部分になります。
ファイルをアップした場所に応じてパスは訂正お願いします。
(このサンプルは、htmlファイルと同一階層にすべてのファイルがある状態)

3行目~7行目 TABLE表示の設定・実行をしている部分です。
$(‘#table_disp’).csv2table(‘list.csv’);
#table_dispがTABLE表示するエリアのidを指定
list.csvが読み込むcsvファイルを指定

9行目 <div id=”table_disp”></div>が TABLE表示されるエリアを記述しています。

動作サンプル


csvファイル内にタグも記述することも出来ます。
↓↓タグ入りのcsvファイルの動作サンプル

↓↓csvファイル内にタグを入力することも出来るみたい
55-2.gif
リンクタグや画像タグなど記述が出来るのであれば、商品リストを表示したり新着情報、トピックス情報などを表示するのにも使えるかもしれません。

それくらいなら、タグで記述しますと言われてしまえば、それまでですが知っておいても損はしない方法かなと思います。

ポイントとしては、csvファイルを変更するだけで表示の変更が出来るってところですね。もし、使えそうな場面があれば、ぜひ試してみてください。

jquery.csv2table.jsのサイトには、いろいろなサンプルが掲載されていますので、細かく制御したい場合などは参考にしてみてください。

<TABLE>の関連記事もよければご覧ください

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法

CSVの関連記事もよければご覧ください




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑