Jquery实现双击单元格修改表单数据

最新推荐文章于 2023-05-22 20:09:00 发布

原创最新推荐文章于 2023-05-22 20:09:00 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery监听表格双击事件，使指定列变为可编辑状态的方法。通过创建输入框替换原有文本，实现了单元格内容的编辑功能，并在失去焦点时确认修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//监听表格，双击表格第9列的时候变为可编辑状态
$('table').on('dblclick','tr td:nth-child(10)',function(){
            var td = $(this);
            // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整
            var text = td.text();
            var txt = $("<input type='text' class='edit_text'>").val(text);
            txt.blur(function() {
                // 失去焦点，保存值。于服务器交互自己再写,最好ajax
                var newText = $(this).val();
                confirm("确定要修改吗？");
                // 移除文本框,显示新值
                $(this).remove();
                td.text(newText);
            });
            td.text("");
            td.append(txt);
            txt.focus();
})