jQueryプラグイン「editableTableWidget」を使って、Table内のテキストのリアルタイム編集を可能にする方法

Table内のテキストをリアルタイムに編集可能にする方法

editableTableWidgetというjQueryプラグインを使用して、Table内のテキストのリアルタイム編集を可能にする方法を紹介します。

まずはこちらのデモをご覧ください。

Table内のテキストのリアルタイム編集

Table内のテキストを編集することができます。1行目は見出しとして編集不可になっているので、2行目以降が編集可能です。

実装方法

まずは、mindmup-editabletable.jsをダウンロードします。

ダウンロードページの右上の「Download ZIP」から、zipファイルをダウンロードします。

zipファイルを解凍したら、中に入っているmindmup-editabletable.jsを使用します。

mindmup-editabletable.jsとjQueryを読み込みます。

HTMLを用意します。

次のコードを</body>閉じタグの前に記述します。

これで、Table内のテキストが編集可能になりました。

参考情報

もっと知りたい方は、下記のページをご覧ください。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,447