Javascript 单击按钮时将标签转换为输入字段的问题

我在讨论的帖子中修改了答案。
在我的应用程序中，我有两个按钮-编辑和保存。单击编辑时，

标签

将转换为

输入

字段，用户可以在其中编辑内容并保存

一切正常，但问题是当用户单击编辑按钮两次时，

输入

字段中的内容变为空白，即

值变为空白。
请给我建议一个解决办法。我哪里做错了

<div id="companyName">
    <label class="text-cname"><b>@Html.DisplayFor(m => m.Company)</b></label>
</div>

<div class="row center-block">
    <input type="submit" class="btn btn-success" value="Save" id="btnSave" />
    <input type="button" id="edit" class="btn btn-primary" value="Edit" />
</div>

<script>
    $(document).ready(function () {
        $('#edit').click(function () {
            // for company name
            var companyName = $('.text-cname').text();
            var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
            $('.text-cname').text('').append(lblCName);
            lblCName.select();

        });

        $('#btnSave').click(function () {
            var text = $('#attrCName').val();
            $('#attrCName').parent().text(text);
            $('#attrCName').remove();
        });

    });
</script>

@DisplayFor（m=>m.Company）
$（文档）.ready（函数（）{
$（“#编辑”）。单击（函数（）{
//公司名称
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）
$（'.text cname'）.text（''）.append（lblCName）；
lblCName.select（）；
});
$（'#btnSave'）。单击（函数（）{
var text=$（'#attrCName'）.val（）；
$（'#attrCName'）.parent（）.text（text）；
$（“#attrCName”）.remove（）；
});
});

最简单的修复方法是在单击编辑按钮后禁用它，并在保存后再次启用它：

$(document).ready(function () {
    $('#edit').click(function () {

        $(this).prop('disabled', true);

        /*for company name*/
        var companyName = $('.text-cname').text();
        var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
        $('.text-cname').text('').append(lblCName);
        lblCName.select();

    });

    $('#btnSave').click(function () {
        $('#edit').prop('disabled', false);

        var text = $('#attrCName').val();
        $('#attrCName').parent().text(text);
        $('#attrCName').remove();
    });
});

$（文档）.ready（函数（）{
$（“#编辑”）。单击（函数（）{
$（this.prop（'disabled'，true）；
/*公司名称*/
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）
$（'.text cname'）.text（''）.append（lblCName）；
lblCName.select（）；
});
$（'#btnSave'）。单击（函数（）{
$（'#edit'）.prop（'disabled'，false）；
var text=$（'#attrCName'）.val（）；
$（'#attrCName'）.parent（）.text（text）；
$（“#attrCName”）.remove（）；
});
});

最简单的修复方法是在单击编辑按钮后禁用它，并在保存后再次启用它：

$(document).ready(function () {
    $('#edit').click(function () {

        $(this).prop('disabled', true);

        /*for company name*/
        var companyName = $('.text-cname').text();
        var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
        $('.text-cname').text('').append(lblCName);
        lblCName.select();

    });

    $('#btnSave').click(function () {
        $('#edit').prop('disabled', false);

        var text = $('#attrCName').val();
        $('#attrCName').parent().text(text);
        $('#attrCName').remove();
    });
});

$（文档）.ready（函数（）{
$（“#编辑”）。单击（函数（）{
$（this.prop（'disabled'，true）；
/*公司名称*/
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）
$（'.text cname'）.text（''）.append（lblCName）；
lblCName.select（）；
});
$（'#btnSave'）。单击（函数（）{
$（'#edit'）.prop（'disabled'，false）；
var text=$（'#attrCName'）.val（）；
$（'#attrCName'）.parent（）.text（text）；
$（“#attrCName”）.remove（）；
});
});

您可以使用

replaceWith（）

方法将

标签

转换为

文本区域

$（“#编辑”）。单击（函数（）{
var text=$（“标签”）.text（）；
$（“标签”）。替换为（“”）；
});
$（“#保存”）。单击（函数（）{
var text=$（“输入”）.val（）；
$（“输入”）。替换为（“+text+”）；
});

编辑
拯救



Text
您可以使用
replaceWith（）
方法将
标签
转换为
textarea


$（“#编辑”）。单击（函数（）{
var text=$（“标签”）.text（）；
$（“标签”）。替换为（“”）；
});
$（“#保存”）。单击（函数（）{
var text=$（“输入”）.val（）；
$（“输入”）。替换为（“+text+”）；
});

编辑
拯救



Text
当您第二次单击companyName的值为空时，这就是
值变为空的原因。这是一个非常简单的解决方案，但您会失去对编辑框的关注，而编辑框很容易修复

$（“#编辑”）。单击（函数（）{

公司名称的
/**/
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）；
如果（公司名称！=“”）
$（'.text cname'）.text（''）.append（lblCName）；
lblCName.select（）；
});
当您第二次单击companyName的值为空时，这就是
值变为空的原因。这是一个非常简单的解决方案，但您会失去对编辑框的关注，而编辑框很容易修复

$（“#编辑”）。单击（函数（）{

公司名称的
/**/
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）；
如果（公司名称！=“”）
$（'.text cname'）.text（''）.append（lblCName）；
lblCName.select（）；
});
试试这个


函数EditContent（）{
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）；
如果（公司名称！=“”）{
$（'.text cname'）.text（''）.append（lblCName）；
}
lblCName.select（）；
}
函数SaveContent（）{
var text=$（'#attrCName'）.val（）；
$（'#attrCName'）.parent（）.text（text）；
$（“#attrCName”）.remove（）；
}

单位
试试这个


函数EditContent（）{
var companyName=$（'.text cname'）.text（）；
变量lblCName=$（''）；
如果（公司名称！=“”）{
$（'.text cname'）.text（''）.append（lblCName）；
}
lblCName.select（）；
}
函数SaveContent（）{
var text=$（'#attrCName'）.val（）；
$（'#attrCName'）.parent（）.text（text）；
$（“#attrCName”）.remove（）；
}

单位
当我编辑内容并单击“保存”时，该值将被保存为“20”。很奇怪。我使用的代码与你的完全相同。我正在使用jquery2.2。2@sumedha在JSFIDLE中测试代码并检查结果。我是否可以将“label”重命名为“lblCompany”，然后使用
文本调用它？当我在js fiddle中执行此操作时，它不起作用。此外，如果我有多个标签需要更改为文本框，我将如何使用此代码？@sumedha您可以在选择中使用
id
或
class
而不是
lable
。请参阅@sumedha此讨论是否已完成？当我编辑内容并单击“保存”时，值将保存为“20”。很奇怪。我使用的代码与你的完全相同。我正在使用jquery2.2。2@sumedha在JSFIDLE中测试代码并检查结果。我是否可以将“label”重命名为“lblCompany”，然后使用
文本调用它？当我在js fiddle中执行此操作时，它不起作用。此外，如果我有多个标签需要更改为文本框，我将如何使用