双击表格 td 变成可以编辑的input框失去焦点提交

最新推荐文章于 2023-05-02 14:27:10 发布

前端-艺生

最新推荐文章于 2023-05-02 14:27:10 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jqueryTableEdit 文章标签： jquery table

本文链接：https://blog.youkuaiyun.com/qq_27970999/article/details/78683465

jqueryTableEdit 专栏收录该内容

1 篇文章

订阅专栏

通过jQuery实现表格的双击事件，当用户双击表格td单元格时，该单元格变为可编辑的input框。输入完成后，失去焦点时会自动提交更新的数据到服务器。使用AJAX进行后台交互，保存新的文本并移除input，恢复td显示新值。

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

$("#table").on("dblclick","td",function(){
    var td = $(this);
    var url=$("form").attr("action");
    // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整
    var text = td.text();
    var txt = $("<input name='cell' type='text' class='form-control'>").val(text);
    txt.blur(function(){
        // 失去焦点，保存值。于服务器交互自己再写,最好ajax
        var newText = $(this).val(),
            name=$(this).attr("name"),
            input=$(this),
            data={name:newText};
        $.post(url,data,function () {
            // 移除文本框,显示新值
            input.remove();
            td.text(newText);
        });
    });
    td.text("");
    td.append(txt);
});