[JavaScript]table-to-jsonを使ってテーブル内容をJSONにする

中村修太

2013.07.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

htmlのテーブル内容をJSONにする

htmlのテーブル内容を取得してJavascriptでなんらかの処理をすることはよくあります。
普通にjqueryを使い、行を取得してセルを取得して・・・と処理すればデータを取得することができますが、
今回紹介するjQuery用プラグイン、「table-to-json」を使用すると、もっと簡単にテーブルのデータをJSON形式で取得できます。

環境構築方法

今回使用した動作環境は以下のとおりです。

OS : MacOS X 10.7.5
jQuery : 1.9.1

セットアップ&動作確認

まずはここからtable-to-jsonをダウンロードしましょう。
ここのlibディレクトリにあるjsファイルを使用します。
そして、下記のようなhtmlをディレクトリ内に作成し、動きを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>table to json</title>
</head>
<body>
<!-- MAIN CONTENT -->
<div id="container">
    <h2 id="toc-table-to-json-demo">table to json Demo</h2>
    <table id='example-table'>
        <thead>
        <tr>
            <th data-override="name">名前</th>
            <th data-override="tel">電話番号</th>
            <th data-override="age">年齢</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>taro</td>
            <td>090-xxxx-xxxx</td>
            <td>30</td>
        </tr>
        <tr>
            <td>花子</td>
            <td>03-xxxx-xxxx</td>
            <td>31</td>
        </tr>
        <tr>
            <td>たけぞう</td>
            <td>080-xxxx-xxxx</td>
            <td>120</td>
        </tr>
        </tbody>
    </table>
    <button id="btn">table to json</button>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.tabletojson.js"></script>
<script>
    $('#btn').click(function () {
        var table = $('#example-table').tableToJSON(); 
        console.log(table);
        alert(JSON.stringify(table));
    });
</script>
</body>
</html>

テーブルをjQueryで取得し、tableToJSON関数を呼ぶだけでテーブル内容をJSON化できます。簡単ですね。
また、thタグにdata-override属性をつけることで、JSON化した際のプロパティ名を指定できます。