カーソルハイライト機能をつける Tablecloth が重いので軽量版を作成

約半途ほど前に各所で紹介されていた記憶がある Tablecloth って JavaScript のライブラリ。マウスの動きにあわせてテーブルをハイライトしてくれる小粋なライブラリです。

こいつを本業のツールでちょっと利用としたのですが問題発生。比較的要素数が少ない小さめのテーブルで使う分にはなんら問題なく動作するのですが、ある程度要素数が多い大きなテーブルで使うととたんに動作がもっさりして全く使いものになりません。しかももっさりするのは IE 限定です。FireFox とか Opera では至って快適に動作します。また IE かっ！と思いつつももっさりする理由を調べようとソースをみてみました。

さていろいろ書き換えたりして実験した結果、重い理由は以下の二点であることがわかりました。

- スポンサーリンク -

ハイライトの実装に CSS のクラスの切り替えを利用していました。この CSS の切り替えという行為が IE だとすごくコストが大きいようです。
マウスのカーソルイベントが発生するたびに getElementsByTagName("tr") でイベント発生したテーブルの TR 要素を取り出してうんぬんと処理をしているので遅いようです。

さてでっちあげの解決方法として以下を検討します。
※あまり時間がない中で思いつきで実装したのでより良い方法はあると思いますので教えて下さい・・・m(_ _)m

ハイライトの実装は格好悪いけどベタに各要素の bgcolor の書き換えで実装。
→CSS の定義が優先されるので CSS 側でいろ定義はしないなど情けないことをする必要あり。
初期化時に getElementsByTagName("tr") で取得したデータは変数にキャッシュしておく。
→JavaScript で動的に要素とか書き換わる可能性がある場合はデータに齟齬がでてしまう。

さていざ実装しようとしましたが、今回必要なのは行単位のハイライトで列単位のハイライトは不要なのでソコの処理もごっそり省いちゃいました。したがって Tablecloth 完全互換じゃなくなりました。アレコレ今必要としているもの向けに考えて機能的に変更した点は以下の点です。

列単位のハイライト機能を完全に削除。
カーソルクリックして選択ハイライトする行は複数保持できる。もう一度クリックしたら選択ハイライトを解除する。
ハイライト機能を適用するテーブルを class 名を関数呼び出しの引数で指定可能とした。
ハイライトする色を CSS でなく関数呼び出しの引数で実装した。
class="empty" となっている TR レコードはハイライト対象外とする。

動作イメージはこんなかんじ。

まだまだバギーなバージョンかもしれませんが取りあえず公開。本業の方ではなかなか好評だったりします。
※ほとんどオリジナルのソースを流用です。 colspan/rowspan はオリジナルも非対応なのでそのまま非対応です。ｗ

tablecloth_light.js　（右クリックで保存して下さい）

使い方（基本 test_light.html を参考にしてください）

カーソルハイライトを使うテーブル向けに css を適当に定義する。backgroundcolor は定義しないようにする。
カーソルハイライト機能を使いたい <table> タグに class="tblcloth" を定義する。（※class名は css にあわせてお好きなものをどうぞ）
</body> タグの直前あたりで　<script type="text/javascript" src="tablecloth_light.js"></script>　を記述
その後に　<script>tablecloth("tblcloth", "#f0f0f0", "#ffffff", "#ddffff", "#ffdddd", "#ffeeff");</script>　を記述する。引数の説明は、（class名、縞模様色１、縞模様色２、ハイライト色、選択ハイライト色１、選択ハイライト色２）です。

最後に、平成17年国勢調査の結果　から持ってきた実データをもとに Tablecloth と軽量版 Tablecloth の動作の違いサンプルを置いておきます。

Tablecloth オリジナル版の動作サンプル　　←→　　Tablecloth 軽量版の動作サンプル

- スポンサーリンク -