小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


jQueryでTableタグをスクレイピングして値を取り出す方法

jQuery

はじめに

以前、JavaScriptでtableタグをスクレイピングして値を取り出す方法 はてなブックマーク - JavaScriptでtableタグをスクレイピングして値を取り出す方法 - 大人になったら肺呼吸というエントリを書きました。
先日、コメント欄でjQueryで書きなおすとどうなりますか？と聞かれたので、jQueryで書いてみました。

jQuery最高の教科書
jQuery最高の教科書
posted with amazlet at 14.01.23
株式会社シフトブレイン
SBクリエイティブ
売り上げランキング: 17,130
Amazon.co.jpで詳細を見る

jQueryでTableタグをスクレイピングしてみる

テーブルタグをもつHTMLを作成します。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tableタグのサンプル</title>
<style type="text/css">
table, th, td {
  border: 1px solid orange;
  border-spacing: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="JavaScript" src="table.js"></script>
</head>
<body>
<h1>tableタグのサンプル</h1>
<table>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容１</td>
<td>内容２</td>
</tr>
</tbody>
</table> 
</body>
</html>

GoogleがホスティングしているjQueryをロードするようにすると便利です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

つづいて、jQueryでこのテーブルタグを操作してみます。

// ドキュメントがロードされたときに実行される
$(document).ready(function(){
  // テーブルタグを探して、１番目のテーブルを取得する
  var rows = $("table")[0].rows;
  // 列を１つずつ取り出す
  jQuery.each(rows, function(i) {
    var cells = rows[i].cells;
    // 行を１つずつ取り出す
    jQuery.each(cells, function() {
      // tdタグの値を書き換える
      $(this).text("ほげ");
      // tdタグのスタイルシートを書き換える
      $(this).css('background-color','orange');
    });
  });
});
コード解説

jQueryでドキュメントのロード時に処理をするには、以下のように書きます。

$(document).ready(function(){
  // ここに実際の処理を記述します。
});

jQueryでtableタグを取得するには、以下のように書きます。

$("table")[0]

tableタグを取得したら、rowsプロパティで列を取り出して１つずつ処理をしていきます。このときeachメソッドを使うとfor文でループさせなくても処理できます。

jQuery.each(rows, function(i) {

jQuery.eachを使って列と行がとれたら、$(this)でtableタグのtdにあたるオブジェクトがとれるので、textメソッドで値の更新、cssメソッドでスタイルシートをいじることができます。

jQuery.each(cells, function() {
  // tdタグの値を書き換える
  $(this).text("ほげ");
  // tdタグのスタイルシートを書き換える
  $(this).css('background-color','orange');
});

関連エントリ