Javascript 要输入的jQuery文本？

我有一个简单的布局，有一个文本块和一个

当我单击
时，我希望此文本块成为文本输入。使用jQuery如何做到这一点？
使用jQuery：

$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
e、 预防默认值（）；
$（this）.parent（）替换为（“”）；
});
});



此外，您可以使用链接外的文本填充文本框，如下所示：

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
    });
});

$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var txt=$（“.text”）.html（）；
$（“.text”）。替换为（“”）；
});
});



以下内容将用保存和取消选项替换编辑：

<div>
    <span class="text">testing</span> <a href='#'>test</a>
</div>

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
        $(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
    });
});


测试
$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var txt=$（“.text”）.html（）；
$（“.text”）。替换为（“”）；
$（此）。替换为（“|”）；
});
});

有很多插件可以使用。。。不需要重新发明轮子

嗯。。。你有点不清楚。。。但是


测试

及

$（'.dataGrid a'）。单击（函数（e）{
e、 预防默认值（）；
var EditGrid=$（this.parent（）.children（'span'）；
var DataTxt=EditGrid.text（）；
var inputtml='
这是内容。
$（函数（）{
$（'.editable'）。每个（函数（）{
变量a=$（''）；
（功能（链接、父级）{
link.click（函数（）{
link.remove（）；
var textField=$（''）.val（parent.html（））；
parent.replaceWith（textField）；
删除父项、链接；
});
})（a，$（本））；
$（本）.append（“”）.append（a）；
});
});

工作示例：
听起来他想替换整个块，而不仅仅是
a
（
$（this）.parent（）.replace（“”）；
？）@RoyiNamir-抱歉的语法错误。更正了。他太急于测试了！我想他想保留锚。所以他必须将文本块包装在一个标记中（span，div，p，随便什么）。然后：Cheers@CyStack，我已经将其添加到我的备选方案中。事实上，我需要用输入替换textblock，并用另外两个链接替换“编辑”链接：“保存”和“取消”：我想我可以自己解决剩下的问题，谢谢！你的JSFIDLE怎么了？这不属于这个问题。当然有很多，但有时写三行代码更容易。@llya是的，但这不包括保存输入并将其返回到服务器以持久化的代码（假设你想这么做……你可能会这么做）我已经回答了一个类似的问题，看看：我已经回答了一个类似的问题，看看：
<div>
    <span class="text">testing</span> <a href='#'>test</a>
</div>

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
        $(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
    });
});

<div class="dataGrid">
    <span>test</span>
    <a href="#">edit</a>
</div>

$('.dataGrid a').click( function(e) {
        e.preventDefault();

        var EditGrid = $(this).parent().children('span');
        var DataTxt = EditGrid.text();
        var InputHtml = '<input type=text" value="'+DataTxt +'" />';

        $(this).text('Save?');
        EditGrid.html(InputHtml);
});

<div class="editable">This is the content.</div>
<script type="text/javascript">
    $(function() {
        $('.editable').each(function() {
            var a = $('<a href="#">edit</a>');
            (function(link, parent) {
                link.click(function() {
                    link.remove();
                    var textField = $('<textarea/>').val(parent.html());
                    parent.replaceWith(textField);
                    delete parent, link;
                });
            })(a, $(this));
            $(this).append(" ").append(a);
        });
    });
</script>