コニファ・ロゴ

csstest:jquery.tabledit.jsを使って、その場で編集できるtable(タブレット、スマホにも対応)

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
戻るボタン