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

cell_editor.js

<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>