jQueryでcsvファイルを読み込んでテーブル・表にするプログラミング

jQuery
この記事は約8分で読めます。
スポンサーリンク

今回はHTML,,jqueryを使って外部csvファイルを読み込み、テーブルとして表示する方法について解説します。

結果のイメージはこちら

HTMLなどの基礎知識がある方向けなのでご了承を。

CSSについては特に必要が無いので省略します。

この記事でわかること

外部csvを読み込んでhtmlで表示する方法

HTMLの準備

はじめに、csvを読み込んで表を表示するための準備としてHTMLを書きます。

最低限の完成形はこちら

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
       integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
       crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.5/jquery.csv.min.js"></script>
    <script src="myscript.js"></script>
  </head>
  <body>
    <table border = 1 id="csv-body"></table>
  </body>
</html>

headタグ内の記述

headにはタイトルや文字コードの指定のほかに、次のような指定があります。

  • cssの指定
  • jqueryのインポート
  • jquery-csvのインポート
  • 自分で作ったプログラムコードのインポート

jqueryは言うまでもなくHTML上でjQueryを扱うためにインポートする必要があります。
jquery-csvはjqueryでcsvを扱うのに必要です

インポートの方法は、ファイルをダウンロードして相対パスで指定する方法もありますが、今回はネット経由でとってくる方法にしています。

とりあえず上のサンプルをそのままコピペすればOKです。

bodyタグ内の記述

bodyの中には、csvを読み込んで表を表示するための下準備をします。

といっても準備は<table>タグで囲ってidを設定するだけ。

このidの部分に、読み込んだcsvをテーブルの要素として追加していきます。

jQueryのjavascriptを準備

次に、csvを読み込んで表を表示するためのjavascriptを書きます。

完成形はこちら

//csv読み込み関数
function readCsv(data) {
  //csvをテーブルにして表示するところ
  var target = '#csv-body';
  //csv読み込み
  var csv = $.csv.toArrays(data);
  //作るhtml文を入れるやつ
  var insert = '';

  //csvの上から繰り返す
  for (var i = 0; i<csv.length;i++){
    //一列のcsvの各要素について繰り返す
    //最初はテーブルの見出し
    if (i == 0){

      //テーブルタグ
      insert += '<tr>'
      for (var j = 0;j < csv[i].length;j++){
        insert += '<th>' + csv[i][j] + '</th>'
      }
      insert+= '</tr>'
    }

    //テーブルの要素
    if (i > 0){
      insert += '<tr>'

      for (var j = 0;j<csv[i].length;j++){
        insert += '<td>' + csv[i][j] + '</td>'
      }

      insert+= '</tr>'
    }
  }

  //作ったhtml分を挿入
  $(target).append(insert);
}

//csvを読み込む
$(document).ready(function(){
  var csvfile = 'csvファイルが置いてあるurlを書く';
  $.get(csvfile, readCsv, 'text');
});

//読み込みが完了したら
$(document).ajaxStop(function() {

});//読み込みが終わったらここまで

csv読み込み関数

読み込んだcsvを実際にテーブルに加工する関数です。dataにcsvが入っています。

まず、先ほどHTMLで設定したidを定義。

その後、csvを配列として加工します。得られる配列は2次元配列で、[データの行ごと][行ごとの項目]に区切られています

1.1, 1.2, 1.3
2.1, 2.2, 2.3
3.1, 3.2, 3.3

というデータを読み込んだならば、2.1はcsv[1][0]に入っています。

insertはcsvをもとに作成したhtml文を格納する変数です。

 //csvをテーブルにして表示するところ
  var target = '#csv-body';
  //csv読み込み
  var csv = $.csv.toArrays(data);
  //作るhtml文を入れるやつ
  var insert = '';

その後、配列の各行を取り出して前後に<tr>タグをつけてテーブルのリストを作成。

取り出した行の中のデータ一つ一つに対して<td>タグ(最初は<td>タグ)をくっつけてinsert内に入れていきます。

  • trタグはテーブルの一列を作るタグ
  • thはテーブルの一番上(項目)を作るタグ
  • tdはテーブルのデータを作るタグ
//csvの上から繰り返す
  for (var i = 0; i<csv.length;i++){
    //一列のcsvの各要素について繰り返す
    //最初はテーブルの見出し
    if (i == 0){

      //テーブルタグ
      insert += '<tr>'
      for (var j = 0;j < csv[i].length;j++){
        insert += '<th>' + csv[i][j] + '</th>'
      }
      insert+= '</tr>'
    }

    //テーブルの要素
    if (i > 0){
      insert += '<tr>'

      for (var j = 0;j<csv[i].length;j++){
        insert += '<td>' + csv[i][j] + '</td>'
      }

      insert+= '</tr>'
    }
  }

最後に、作ったhtml文を作っておいたid=targetのところに挿入します。

//作ったhtml分を挿入
  $(target).append(insert);

関数を呼び出しているところ

csvを読んでテーブルを作る関数を実際に読んでいる部分です。

.readyというのは、HTMLの読み込みが終わったら実行される関数。こうしておくことで、他に設定したHTML に干渉せずにテーブルを作成できます

csvfileという変数には、ネット上のcsvファイルの置き場へのurlを書きます。

$.get~~は、csvfileをテキストとして読みこんでそれを先ほど作ったreadcsv関数に渡して実行しています。

//csvを読み込む
$(document).ready(function(){
  var csvfile = 'csvファイルが置いてあるurlを書く';
  $.get(csvfile, readCsv, 'text');
});

テーブルを操作するにはcsvの処理が終わってから

最後の部分は、通信が完了したら実行される部分です。

これをしないとcsvを読み込んで作ったテーブルのタグをjqueryで認識することができないので、データの書き換えやマウスが乗った時の処理などを実装する場合はこの中に書きましょう。

//読み込みが完了したら
$(document).ajaxStop(function() {

});//読み込みが終わったらここまで

jQueryでcsvを読み込んでテーブルを作るまとめ!

以上、jqueryを使って外部csvファイルを読み込み、テーブルを作成する方法についてでした。

意外と単純にできたと思います。この後は自分でテーブルに関する処理を追加したり、cssを整えて見やすいページを作成しましょう。

コメント

タイトルとURLをコピーしました