jQueryプラグイン・jquery.tabledit.jsを使って、ブラウザ上に表示したテーブルの内容をその場で編集可能にする各種機能の実装です。タブレット、スマホ用にも一部の機能を除いて対応しています。
なお、デモスクリプトに書かれている「example.php」は実際には存在しないため、「SAVE」ボタンをタップ、もしくはクリックして送信クエリを実行すると、AJAXリクエスト内のエラーにより、表の行がピンク色に変わります。また、最新のブラウザでなくても使えまますが、数世代前のもの（MacのSafari4など）になるとまったく機能しません。
「編集」ボタンと「削除」ボタンの付いたツールボックスの列をテーブルの右端に追加します。「編集」ボタンをクリックして編集できる状態にすると、「SAVE」ボタンが追加されます。行のすべてのセルが分集可能です。
| # | Nickname | Firstname | Lastname |
|---|---|---|---|
| 1 | markcell | Celso | Marques |
| 2 | dotz | Márcio | Quental |
| 3 | zikospeed | António | Figueiredo |
セルをダブルクリックすると、「CAR」の列ではテキスト編集が可能に、「COLOR」の列ではセレクトボックス（三者択一）になります。
| # | Car | Color |
|---|---|---|
| 1 | Ferrari | Red |
| 2 | Lotus | Green |
| 3 | porsche | Blue |
セルをクリックすると、テキスト編集が可能になりますが、「Nickname」の列は保護（編集不可）されています。
なりますが| # | Nickname | Firstname | Lastname |
|---|---|---|---|
| 1 | markcell | Celso | Marques |
| 2 | dotz | Márcio | Quental |
| 3 | zikospeed | António | Figueiredo |
#2と同じ動きですが、右端に「削除」ボタンのみの列が追加されます。「削除」ボタンをクリックすると、「確認」ボタンが出ます。
| # | Car | Color |
|---|---|---|
| 1 | Ferrari | Red |
| 2 | Lotus | Green |
| 3 | Porsche | Blue |
#1と同じ機能ですが、右端に出るボタンの列がカスタマイズされています。
| # | Nickname | Firstname | Lastname |
|---|---|---|---|
| 1 | markcell | Celso | Marques |
| 2 | dotz | Márcio | Quental |
| 3 | zikospeed | António | Figueiredo |
