Javascript 单击按钮生成文本<；改变>；进入<；输入>；

我做了一个类似这样的表格。当我点击编辑按钮时，它将成为

test@yahoo.com

转换为

登录详细信息
登录ID bisa dipakai salah satu dibawah ini:

电邮：
test@yahoo.com

惠普：
123123

我发现：

$(document).ready(function(){
    $(".loginDetails").click(function() {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
        input.select();
    });
});

$（文档）.ready（函数（）{
$（“.loginDetails”）。单击（函数（）{
变量输入=$（“”{
val:$（this）.text（），
键入：“文本”}
);
$（此）.replaceWith（输入）；
input.select（）；
});
});

$（文档）.ready（函数（）{
$（“.loginDetails”）。单击（函数（）{
变量输入=$（“”{
val:$（this）.text（），
键入：“文本”
});
$（此）.replaceWith（输入）；
input.select（）；
});
});

登录详细信息
登录ID bisa dipakai salah satu dibawah ini:

电邮：
test@yahoo.com  


惠普：
123123123



登录详细信息
登录ID bisa dipakai salah satu dibawah ini:

电邮：
test@yahoo.com

惠普：
123123


Javascript代码：

function toInput(elem){
   var input = $("<input>", {
            val: elem.text(),
            type: "text" }
        );
        elem.replaceWith(input);
        input.select();
}

输入功能（elem）{
变量输入=$（“”{
val:elem.text（），
键入：“文本”}
);
元素替换为（输入）；
input.select（）；
}
下面是将类名添加到编辑超链接的解决方案

<a class="loginDetails">Edit</a>


关于
这就是您要寻找的：

我使用的逻辑是，将“loginDetails”类添加到要转换为输入字段的文本字段中。将click event listener添加到“Edit”链接中，每当用户单击该链接时，都会触发具有“loginDetails”类的所有元素的click事件

JS代码：

$(".loginDetails").click(function(e) {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
});

$("#edit-record").click(function(e){
        e.preventDefault(); // used to prevent the default anchor link behavior
        $("span.loginDetails").trigger("click");
});

$（“.loginDetails”）。单击（函数（e）{
变量输入=$（“”{
val:$（this）.text（），
键入：“文本”}
);
$（此）.replaceWith（输入）；
});
$（“#编辑记录”）。单击（功能（e）{
e、 preventDefault（）；//用于防止默认锚链接行为
$（“span.loginDetails”）.trigger（“单击”）；
});

为“编辑”链接指定“编辑记录”id：



希望能有帮助。如果有任何疑问，请告诉我。
我认为最初您希望做的是将“span”标记更改为“input”字段，将其更改为“input”字段，并将其禁用，而不是完全不同的标记。然后在编辑时单击，您所要做的就是在输入字段中切换出禁用属性

对于有效的锚定标记，您始终需要一个“href”。当我不希望href实际执行任何操作时，我总是将“javascript:void（0）；”放在其中，而不是将其留空

<fieldset class="shortfieldset">
            <div class="fieldsetTop">
                <div class="fieldsetTop-left floatNone">
                    <h3>Login Details</h3>
                </div>
                <div class="fieldsetTop-right btn floatNone">
                    <a href="javascript:void(0);" id="edit"> Edit </a>
                    <a href="javascript:void(0);" id="save> Save </a>
                </div>
            </div>
            <p> Login ID bisa dipakai salah satu dibawah ini: </p>
            <label for="email"> Email </label>:
            <input type="text" id="email" name="email" disabled value="text@yahoo.com" />
            <label for="name"> HP </label>:
            <input type="text" id="name" name="name" disabled value="123123123" />
        </fieldset>

jquery

$('#edit').click(function(e) {
    $(this).hide()
           .closest('fieldset')
           .find('input[type="text"]').attr('disabled', false);               

    $('#save').show();        
});

$('#save').click(function(e) {
    // do your save
    // once saved, hide btn
    $(this).hide();
});

编辑：

如果HTML5不可用，则必须将禁用属性更改为：

<input ...... disabled="disabled" .... />


你能跳过它吗？jsfiddle.net/Your event被附加到.loginDetails，但是我在htmlHello中看不到这个类，这对我来说非常有用。但你只给我看一个输入。两个输入（包括HP）如何？我曾尝试为电子邮件和HP放置
，但当我单击按钮时，占位符显示其中两个。我想要的是每个输入中的每一个。不是两个。有什么想法吗？谢谢你，这是你的意思吗？如果不是，对不起，但是，请解释清楚：/对不起，我的互联网坏了。是的，这就是我的意思！非常感谢。是否有任何方法可以将
name=“email”
放入数据库，因为我想更新数据库。谢谢@JairoHello，也谢谢你。我是否可以将
name=“name”
放在可以调用值以更新数据库的位置？谢谢，我不确定更新数据库是什么意思，但您可以同样轻松地将“name”属性添加到输入控件中。这就是你的意思吗？看看最新的问题。我刚刚更新了。是的，我的意思是，但每个输入都有不同的名称。一个用于电子邮件，另一个用于hp。哦，您的脚本与另一个答案不同，这非常好而且简单。还有一点帮助，当我点击编辑时，编辑按钮将消失，提交按钮将出现，你能帮我吗？谢谢，它工作得很好。我刚刚添加了
$（“#编辑”）.hide（）谢谢你所做的一切，伙计！谢谢你，有没有办法让我说出他们每个人的名字？因为我想更新数据库。谢谢
<fieldset class="shortfieldset">
            <div class="fieldsetTop">
                <div class="fieldsetTop-left floatNone">
                    <h3>Login Details</h3>
                </div>
                <div class="fieldsetTop-right btn floatNone">
                    <a href="javascript:void(0);" id="edit"> Edit </a>
                    <a href="javascript:void(0);" id="save> Save </a>
                </div>
            </div>
            <p> Login ID bisa dipakai salah satu dibawah ini: </p>
            <label for="email"> Email </label>:
            <input type="text" id="email" name="email" disabled value="text@yahoo.com" />
            <label for="name"> HP </label>:
            <input type="text" id="name" name="name" disabled value="123123123" />
        </fieldset>

input[disabled] {
         // style the text box like your span here
}
#save {
    display: none;
}

$('#edit').click(function(e) {
    $(this).hide()
           .closest('fieldset')
           .find('input[type="text"]').attr('disabled', false);               

    $('#save').show();        
});

$('#save').click(function(e) {
    // do your save
    // once saved, hide btn
    $(this).hide();
});

<input ...... disabled="disabled" .... />