Skip to content

Instantly share code, notes, and snippets.

@kurozumi
Created April 11, 2017 06:34
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kurozumi/f39bc350367bb2e41af0b286f079b83f to your computer and use it in GitHub Desktop.
【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