Webベースの業務システムを作っていると度々データを一覧で表示する機会があります。そんな中で度々あがってくるのが一覧の時点でデータ編集したいという要望です。 In place editのような仕組みを使って作り込んでも良いですが、専用の仕組みを使った方がユーザビリティ高くできるはずです。そこで使ってみたいのがjQuery editTableになります。  jQuery editTableの使い方は以下のようになります。

var mytable = $('#edittable').editTable({
	data: [['']],       // Fill the table with a js array (this is overridden by the textarea content if not empty)
	jsonData: false,    // Fill the table with json data (this will override data property)
	headerCols: false,  // Fix columns number and names (array of column names)
	maxRows: 999        // Max number of rows which can be added
});

データはJSONの配列を当てはめるだけです。後は行やカラムの追加含めて自由にできます。編集が終わったら保存ボタンを押したタイミングでサーバにデータをポストすれば良いわけです。 後は以下のようなメソッドが提供されています。

mytable.loadData(dataArray);    // 配列データの読み込み
mytable.loadJsonData(jsonData); // JSONデータの読み込み
mytable.getData();              // データの取り出し
mytable.getJsonData();          // JSONでのデータ取り出し
mytable.reset();                // リセット

使い方はシンプルなので後は既存の業務フローに合わせて自由に使えるでしょう。見た目は普通にラベルとして表記されているだけに見えるので、データの確認にもその場での編集にも使える便利なライブラリです。 jQuery editTableはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 jQuery editTable micc83/editTable