【jQuery】テーブルのセルの値をブラウザで編集・更新する

jQueryを使ってテーブルのセルの値をブラウザで編集・更新する方法です。

サンプルコードは以下のとおりです。

	<script>
	$(document).on('click', 'td', function () {
	var editable = $(this);
	// セルをクリックしたら取得したセルの値をtextareaに追加してセル内にtextareaを挿入
	editable.html('<textarea style="width:100%">' + editable.html() + '</textarea>').find('textarea')
	.focus()
	.on('change', function () {
	// 編集したらajaxでデータベースへ保存
	$.ajax(url, {
	type: 'post',
	data: {value: $(this).val()}
	}).done(function (result) {
	//alert(result);
	});
	})
	.on('blur', function () {
	// フォーカスが外れた時、セルに値を追加して不要なtextareaを削除
	editable.append($(this).val());
	editable.find('textarea').remove();
	})
	.on('click', function (e) {
	e.stopPropagation();
	});
	});
	</script>

view raw cell_editor.js hosted with by GitHub

上記の他に、ajaxで渡された編集データを保存する処理と、保存したデータを取得してセルに表示する処理が必要になります。