【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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment