Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
【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