OTCHY.NET

Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML

<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果

GIGAZINE で紹介されていた、解読がとても難しい英語テストの解答用紙を、Excel で解読してみました。

全文はこちら↓

一番左のブロックは、単に内容を写し取っただけ。
真ん中のブロックは、左のブロックを 2 進数と解釈して 16 進数に変換します。

=BIN2HEX(A1)

右のブロックは、真ん中のブロックを 16進数と解釈して 10 進数に変換の上、アスキーコードとして文字に解釈します。

=CHAR(HEX2DEC(J1))

もちろん、16 進数とか見せずに、一気に文字化も出来ますが、そこはまあ見た目の問題ですね。

最近、Synergy を導入して 2 台の PC でウハウハしていてます。
Synergy を使うと、単純なテキストとか、画像に関してはクリップボード共有で受け渡しできるのですが、複雑なオブジェクトなどの受け渡しは無理のようです。

ただ、Excel のデータは以下の手順で貼り付け可能だったのでメモしておきます。

1. コピー元 PC の Excel 上で普通にコピー
2. コピー先 PC の Excel 上で、セルを右クリックし、「形式を選択して貼り付け」を選択
3. 「貼り付ける形式」でテキストを選択

普通にペーストすると、データが 1 つのセル内に展開してしまってダメでした。
上記の方法は、単にテキストデータとして受け渡しているだけなので、書式情報とかはコピーできないです。
とはいえ、いったんテキストエディタを経由したりするよりもシンプルで良いですね。