table可编辑表格写法（简单）

最新推荐文章于 2025-07-01 13:50:58 发布

IceYang-

最新推荐文章于 2025-07-01 13:50:58 发布

阅读量1.4w

点赞数 8

CC 4.0 BY-SA版权

分类专栏： html类点文章标签： html table-编辑

本文链接：https://blog.youkuaiyun.com/YangBingX/article/details/71216082

html类点专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种通过双击事件实现表格单元格内编辑的方法。利用jQuery绑定双击事件，将点击的文本替换成输入框，从而允许用户直接修改表格内容。当失去焦点时，若输入框内容为空则移除输入框并恢复原始文本；否则，用输入的内容替换原有文本。

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

1、添加JS

$(".table").find(".dbclicktd").bind("dblclick", function () {
        var input = "<input type='text' id='temp' style='width:130px;' value=" + $(this).text() + " >";
        $(this).text("");
        $(this).append(input);
        $("input#temp").focus();
        $("input").blur(function () {
            if ($(this).val() == "") {
                $(this).remove();
            } else {
                $(this).closest("td").text($(this).val());
            }
        });
    });