javascript - Jquery div 到文本框 onclick 并返回到 div

Question

如果您使用过新的 PHP myadmin，您可以点击一个字段并对其进行编辑，然后当您点击离开时它会变回一个 div，我认为这可以很容易地在网上找到，但实际上不是，所以我试过了为了做到这一点，我对 javascript 不是很好，所以我失败了。这是我到目前为止得到的结果。

HTML:

<td id="td_1"><input type="hidden" value="0" />0</td>

Javascipt:

$("#td_1").click(function() {
    $input = $("#td_1");
    $field = $('<input type="text" id="txt_1" maxlength="1" size="1"/>').attr({
        id: $input.id,
        name: $input.name,
        value: $input.val()
    });
    $input.after($field).remove();
});

它添加了文本框但没有向其添加值，并停留在如何将其改回

感谢您的帮助:)

Answer 1

我会有一个隐藏的文本框，当您单击文本值时会显示该文本框。 <强> Working example

HTML

<td id="td_1"><input id="txtBox" type="textbox" value="0" style="display:none;" /><span id="txtBoxValue">0</span></td>

jQuery

$(function() {
    $('#txtBoxValue').on('click', function() {
        $(this).hide(); //hide text
        $('#txtBox').show(); //show textbox
    });

    $('#txtBox').on('blur', function() {
        var that = $(this);
        $('#txtBoxValue').text(that.val()).show(); //updated text value and show text
        that.hide(); //hide textbox
    });
});