サンプルサイトのスクリプトを示します。
［リスト3］レスポンシブルテーブルその1（jQuery_Mobile_sample2.html）
<!DOCTYPE html> <html> <head> <meta charset=UTF-8" /> <!--1.スマートフォン画面での表示方法指定--> <mata name="viewport" content="width=device-width,initial-scale=1" /> <title>jQuery Mobileサンプル（レスポンシブルテーブル）</title> <!--2.CSSの読み込み--> <link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.3.1.min.css" /> <!--3.jQueryの読み込み--> <script language="javascript" type="text/javascript" src="./Scripts/jquery-1.9.1.min.js"></script> <!--4.jQuery Mobileの読み込み--> <script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.3.1.min.js"></script> </head> <body> <!--5.ページの設定--> <div data-role="page" data-theme="b"> <!--6.ヘッダーの設定--> <div data-role="header" data-theme="b"> <h1>jQuery Mobileサンプルページ（レスポンシブルテーブル）</h1> </div> <!--7.ページ内容の設定--> <div data-role="content"> <!--8.レスポンシブルテーブルの設定--> <table data-role="table" id="table1" data-mode="columntoggle" class="ui-responsive table-stroke"> <thead> <tr> <th data-priority="2">順位</th> <th>名前</th> <th data-priority="3">勝ち数</th> <th data-priority="4">負け数</th> <th data-priority="1">ポイント</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>山田太郎</td> <td>5</td> <td>1</td> <td>25</td> </tr> <tr> <th>2</th> <td>田中次郎</td> <td>3</td> <td>2</td> <td>15</td> </tr> <tr> <th>3</th> <td>佐藤三郎</td> <td>2</td> <td>3</td> <td>10</td> </tr> <tr> <th>4</th> <td>高橋四郎</td> <td>1</td> <td>5</td> <td>5</td> </tr> </tbody> </table> </div> <!--9.フッターの設定--> <div data-role="footer" data-theme="b"> <h3>Codezine</h3> </div> </div> </body> </html>
8.レスポンシブルテーブルの設定のtableタグにおいて、「data-role="table"」と「data-mode="columntoggle"」を合わせて記述することにより、レスポンシブルテーブルを設定できます。さらにclass属性に「ui-responsive」を設定することにより、テーブルのtheadタグで囲まれた各列に設定された「data-priority」の設定値が小さい列を優先的に表示し、設定値が大きい列は、画面幅が狭い場合は表示しないようにすることができます。class属性の「table-stroke」は、行ごとに仕切りの線を入れる設定です。
表示されなかった列に関しては、自動的に右上に表れる「Columns」というボタンをタッチすることにより、表示するかどうかを選択することができます。
図6 ボタンをタッチして表示する列を選択する画面
