HTMLのテーブル（table）を行列固定でスクロールさせる

技術屋さんの視点からは「結構キツイな～」と思うことでも、お客様からは「えっ！？それぐらいできないの？」なんて思われることが結構あります。

その代表格はtableをExcelっぽくして欲しい、という要望ではないでしょうか。
なまじっかGooleDocsなんてものがあったりするのでExcelを日常的に使用されているお客様はWEBでもそのようなI/Fを求められます。

ExcelっぽいHTMLテーブル、、
結構キツイのよね・・・。

Flash使える場合はその方向になりますが、1画面だけ、なんて要件でしたらJavascriptで何とかしたい。

JSでテーブルをExcelっぽくするライブラリには、まとまったものではYahooUIやDojoがありますが、行列を固定したスクロールは調べた限りでは出来なさそうでした。

そんな時のJSライブラリ。


・Super Tables

http://www.matts411.com/post/super_tables/

※参考
http://c-brains.jp/blog/wsg/09/06/16-151445.php

1. CSSとJSのロード

こんな感じで。

<style type="text/css"> 
  @import "/js/Super_Tables_0_30beta_compressed/stylesheets/superTables_compressed.css";
</style> 
<script src="/js/Super_Tables_0_30beta_compressed/javascripts/superTables_compressed.js" type="text/javascript"></script>

2. テーブル全体のスタイル

こんな感じで。

<style type="text/css">
.fakeContainer {
    margin: 0 0 20px;
    border: none;
    width: 400px;
    height: 100px;
    overflow: hidden;
}
</style>

3. テーブル作成

<div class="fakeContainer">
<table id="demoTableA">
  <tr>
    <th>header00</th>
    <th>header01</th>
    <th>header02</th>
    <th>header03</th>
    <th>header04</th>
    <th>header05</th>
    <th>header06</th>
    <th>header07</th>
    <th>header08</th>
    <th>header09</th>
  </tr>
  <tr>
    <th>header10</th>
    <th>header11</th>
    <th>header12</th>
    <th>header13</th>
    <th>header14</th>
    <th>header15</th>
    <th>header16</th>
    <th>header17</th>
    <th>header18</th>
    <th>header19</th>
  </tr>
  <tr>
    <td>data00</td>
    <td>data01</td>
    <td>data02</td>
    <td>data03</td>
    <td>data04</td>
    <td>data05</td>
    <td>data06</td>
    <td>data07</td>
    <td>data08</td>
    <td>data09</td>
  </tr>
  <tr>
    <td>data10</td>
    <td>data11</td>
    <td>data12</td>
    <td>data13</td>
    <td>data14</td>
    <td>data15</td>
    <td>data16</td>
    <td>data17</td>
    <td>data18</td>
    <td>data19</td>
  </tr>
  <tr>
    <td>data20</td>
    <td>data21</td>
    <td>data22</td>
    <td>data23</td>
    <td>data24</td>
    <td>data25</td>
    <td>data26</td>
    <td>data27</td>
    <td>data28</td>
    <td>data29</td>
  </tr>
  <tr>
    <td>data30</td>
    <td>data31</td>
    <td>data32</td>
    <td>data33</td>
    <td>data34</td>
    <td>data35</td>
    <td>data36</td>
    <td>data37</td>
    <td>data38</td>
    <td>data39</td>
  </tr>
</table>
</div>

4. 行列固定設定

HTMLを読み込んでからこんな感じでスクリプト実行。
（</body>直前に書けばいい）

<script type="text/javascript">
//<![CDATA[
(function () {
 new superTable("demoTableA", {
  cssSkin : "sOrange", // eg. "sDefault", "sSky", "sOrange", "sDark"
  headerRows : 1, // 固定する行数
  fixedCols : 1 // 固定する列数
  // onStart : function(), // スクリプトを実行できるらしい（試してない）
  // onFinish : function(), // スクリプトを実行できるらしい（試してない）
 });
})();
//]]>
</script>

・jquery

※元ネタ
http://fixed-header-using-jquery.blogspot.com/2009/05/scrollable-table-with-fixed-header-and.html

上述のSuper Tablesでほとんどの場合は事足りることと思われますが、テーブルにFormを入れ込まないといけなくなると途端に使えなくなります。
Super Tablesは普通のtable記述にclass打つだけで実現できるので非常に分かりやすいのですが、固定スクロールを実現するために裏でダミーのtableを複製したりしており、formをsubmitした際に新しいデータが飛んできません。（同一nameやidを持つformエレメントがSuper Tablesによって裏でいくつか複製されます。）

Super Tablesに比べてやや分かりにくくはなりますが、Pavanさんが作成してくれたリンク先のスクリプトを適用すればFormが入ったスクロールテーブルも実現可能です。
確かめてはいませんが、IE6、7、8、FF3、3.5、Chrom2で動作するとのことです。

また、リンク先の記述ではjquery-1.3.2.jsを使用していますが、jquery-1.4.2.min.jsでも動作しています。

※デモ
http://acatalept.com/common/test/fixed-table.html
※ソース
http://snipt.org/loz