これは使い勝手良さそう！ Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。 表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがeditableTableWidgetです。

editableTableWidgetのデモ

ちょっとしたことですが、編集後に一番下の行のサマリーも変わっています。計算処理も可能です。

editableTableWidgetの使い方

使い方は簡単で、以下のようなコードを実行します。

$('#table').editableTableWidget();

さらにバリデーションは以下のようになります。

$('table td').on('validate', function(evt, newValue) {
	if (....) { 
		return false; // mark cell as invalid 
	}
});

簡単ですね。さらに値が変わった場合のイベントもあります。

$('table td').on('change', function(evt, newValue) {
	// do something with the new cell value 
	if (....) { 
		return false; // reject change
	}
});

値をリアルタイムにチェックできるのは便利そうです。後は入力完了時にサーバに飛ばすようにすれば、スムーズな編集が実現できるでしょう。クリックによるセル選択の他、矢印キーによるフォーカス移動にも対応しています。

editableTableWidgetはjQuery製、Bootstrap用のオープンソース・ソフトウェア（MIT License）です。

Tiny editable jQuery Bootstrap spreadsheet from MindMup mindmup/editable-table