この記事は公開されてから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化した際のプロパティ名を指定できます。
まとめ
簡単にテーブル内容がJSONデータとして取得できることがわかりました。 また、ignoreColumns/onlyColumnsオプションをすれば、JSON化するカラムを自分で決めることもできます。
186
