Question

我要编辑字段。当用户点击编辑时，我想要将信息转换为文本框，其中包含以前的值但我遇到了问题。以下代码是我尝试过的。它提供HTML标记而不是显示文本框。我怎样才能做到这一点。谢谢。

Jquery的

  $(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
   $("#name").text(x);
   $("#city").text("<input type='text' value='" + city + "'>");
   $("#mob").text("<input type='text' value='" + mob + "'>");
});

HTML

 <li class="list-group-item"> <b>Name:</b> <span class="inf" id="name">Some name</span> <span class="label label-info edit">Edit</span> </li>
    <li class="list-group-item"> <b>Current City:</b> <span class="inf" id="city"> City name</span>  </li>
    <li class="list-group-item"> <b>Mobile Number:</b> <span class="inf" id="mob"> mobile number </span> </li>

Answer 1

使用.html（）而不是.text（）

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
    $("#name").html(x);
    $("#city").html("<input type='text' value='" + city + "'>");
    $("#mob").html("<input type='text' value='" + mob + "'>");
});

因为您希望在特定元素上看到html元素，请使用.html()

Answer 2

试试这段代码：

HTML：

<li class="list-group-item"> <b>Name:</b> <br/><span class="inf" id="name"><?php echo $uinfo->name; ?></span>  </li>
<li class="list-group-item"> <b>Current City:</b><br/> <span class="inf" id="city"><?php echo $uinfo->current_city; ?></span>  </li>
<li class="list-group-item"> <b>Mobile Number:</b><br/> <span class="inf" id="mob"><?php echo $uinfo->m_number; ?></span> </li><br/>
<span class="label label-info edit">Edit</span>

JS：

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
   $("#name").html("<input type='text' value='" + name + "'>");
   $("#city").html("<input type='text' value='" + city + "'>");
   $("#mob").html("<input type='text' value='" + mob + "'>");
});

这里有实时DEMO供您参考

Answer 3

在jquery中使用 replaceWith() ，并更改属性，值，ID

$(".edit").on('click', function () {
    $(".inf").each(function () {
        $(this).replaceWith(function (i, text) {
            return $("<input>", { // change the type
                type: "text",
                value: text, // getting span text 
                id: this.id // getting span id
            })
        });
    });
});

将span标记转换为文本框，其中包含值

Jquery的

HTML

3 个答案:

的 DEMO