Table要素に、ペーストや編集機能を付加するライブラリを公開します

HTMLのTABLE要素に、セルの選択や内容の更新、列や行のサイズ変更などを行えるようにするJavaScriptのライブラリです。スプレッドシートなどのデータを、ペーストすることも可能です。

2010/3月現在、αバージョンでありインターフェイスも確定していないため、ライブラリとしての正式な公開はできませんが、サンプルのアプリケーションを公開しますので、使い勝手を体験してみてください。

FireFox3以上、IE7以上、Google Chrome4（以前は3としていましたが、いつの間にか4にバージョンアップしていました！）以上でのみ確認しています。IE6では正しく動作しません。（複数のセルを選択して、ペーストを行うことがGoogle Chromeでも可能になりました。）

スプレッドシート（のようなもの...）

JavaScriptによる、スプレッドシート（のようなもの）の実装です。

このライブラリの、標準機能だけでできることの（全てではありませんが）紹介用のサンプルです。

左のイメージをクリックすると、アプリケーションのページが表示されます。

セルの選択

キーボードの矢印キーやマウスにより、一つのセルを選択できます。

キーボードの矢印キーを使用する場合は、TABLE要素に入力フォーカスがあることを確認してください。入力フォーカスがある場合、ヘッダ行（一番上の行）とヘッダ列（一番左端の列）の選択された行と列のそれぞれのセルの色が、選択済みに変化します。

入力フォーカスは、TABLEをマウスでクリックすることで、取得できます。

複数セルの選択

マウスで選択しながらのドラッグや、Shift+矢印キーで、複数のセルを選択できます。

選択したセルの内容を書き換え

セルを選択した状態でEnterキーを押下すると編集可能となります。編集後Enterキー押下で編集内容が反映されます。

マウスによる列幅や行高の変更

ヘッダ行（一番上の行）のセルの右端やヘッダ列（一番左端の列）のセルの下端にマウスポインタを移動させると、カーソルが変化します。その状態でドラッグすると、列の幅や行の高さを変更することができます。

テキストのペースト

エディタやExcel・OpenOffce.org Calcなどのからコピーしたデータを、Ctrl+vやWebブラウザの編集->貼り付けで、選択されたセル以下にペーストできます。

但し、改行は行の区切りと判断されるため、セルの中で改行されることはできません。

複数のセルを選択した状態でペーストを行うこともできます。但し、Google Chromeでは、マウスでセルを選択した場合、ペーストできないことがあります。webkitをエンジンに使用するepiphanyでも同じ現象なので、webkitに共通した現象かもしれません。

セルの内容のコピー

Ctrl+cやWebブラウザの編集->コピーで、一つのセルの内容をクリップボードにコピーできます。複数のセルを選択している状態でも、先頭の一つのセルの内容だけがコピーされます。

セルの内容のクリア

セルを選択した状態でキーボードのDeleteボタンを押下すると、選択されたセルの内容が削除できます。

ロードしたデータを、指定の内容に基づいてテーブルに表示します。スタイルシートと組み合わせることで、自在に表示形式を変更できます。

左のイメージをクリックすると、アプリケーションのページが表示されます。