【JavaScript】テーブルを編集可能にするスクリプトを書いてみた。

2018年10月15日Javascript, 開発

こんにちは。

最近は便利なものが多くて
自作した編集できるテーブルなんか需要がないだろうと思いつつ
昔作ったものが出てきたので晒してみる。

あんまり覚えていないので質問等には答えられないかもしれません。笑

スポンサーリンク

どんなものか

Excelっぽく操作できるようにしました。

  1. 矢印、Tab、Enterキーでセルの移動ができます。
    ↑→↓← / Tabで→、Shift+Tabで← / Entarで↓、Shift+Enterで↑
  2. 矢印、Enterキーの場合はテーブル内を循環しません。
    Tabキーの場合は右端まできたら次の行の最初に、左端まできたら前の行の最後に移動します。
  3. 編集モード切替
    F2キーを押すと編集モードを切り替えることができます。
    ※ 編集モード中は枠線の色が変わります
    ○編集モード中の動作
    ・矢印キーでテキストボックス内の文字列をカーソル移動します。
    ※ドロップダウンの場合は選択が変更されます。
    ・Tabキーで左右に移動することができます。
    ・F2またはEnterキーで編集モードを終了します。
  4. 入力可能列の切替
    表のヘッダーにあるチェックボックスにチェックがついている列は入力可能となります。
    チェックを外すと、その列は選択不可となり、キーで移動した場合も飛ばされます。
  5. その他
    ○ドロップダウンリストの選択変更方法について
    ・マウスでクリックすると、ドロップダウンリストが開かれます。
    ・セルを選択中に Alt + 矢印キー で編集モードに切り替わります。
    ○入力テキストボックスの最大入力桁数は 20桁にしてあります。

サンプルGIF

ソースコード

画面

JavaScript、cssを読み込んで、適当にテーブルタグを配置。

sample.html

Javascript

IDからDOMを取得したり、イベント追加メソッドを定義したりしてます。
今なら JQuery なんかを読み込めば同じことがサクッとできるんじゃないかと思います。

common.js

画面に設置したテーブルを編集可能にします。

sample.js

スタイル

選択状態や、編集中などのスタイルを定義。

sample.css

 

フォルダ構成

次のように保存して、sample.html を開けば表示できます。

sample.html
├─js
│   ├─common.js
│   └─sample.js
└─css
└─sample.css

ではでは。

 

スポンサーリンク


関連するコンテンツ