Question

我有一张桌子，当用户点击一个单元格时，它就变得可编辑了。当用户取消选择文本字段时，我需要可编辑区域以新值返回纯文本。

另外，我是否可以使用AJAX来更新具有新值的数据库，而不会离开或重新加载页面？那会被称为什么？

这是问题的JSFiddle。

这是将纯文本更改为输入字段的jQuery。

/************ Table Editing ************/
$(".editable-cell").click(function() {
    var input = $("<input>", { val: $(this).text(),
                               type: "text" });
    $(this).replaceWith(input);
    input.select();
});

这是HTML

<table>
    <tr>
        <td class="editable-cell">This is editable</td>
        <td>This is not.</td>
    </tr>
</table>

Answer 1

我认为内容可编辑就是您所需要的。

<table>
    <tr>
        <td class="editable-cell" contenteditable>This is editable</td>
        <td>This is not.</td>
    </tr>
</table>

为了实现AJAX，您需要blur个事件。

$(".editable-cell").blur(function(e) { 
    alert("Do your ajax stuff now!");
});

JSFIDDLE DEMO

Answer 2

您可以快速解决部分问题：

$(".editable-cell").click(function () {
    var control = $(this);
    var input = $("<input>", {
        val: $(this).text(),
        type: "text"
    });
    input.blur(function(){
        control.html(input.val());
    });
    $(this).html(input);
    input.select();
});

这是JSFiddle：http://jsfiddle.net/TBUM3/4/

希望它有所帮助！

取消选择时将输入字段更改为纯文本

2 个答案: