Question

我正在为项目创建客户表单，当我显示它们时，我希望用户能够单击按钮来编辑客户的数据。这是我需要的东西：

<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button>Click me to turn spans into inputs</button>

当用户点击按钮时，我希望跨度变成输入。任何帮助都会被贬低！

Answer 1

你想这样吗？

<强> HTML

<div class="customerdata">
    <span>Customer_name</span>
    <span>Customer_surname</span>
    <span>...</span>
    <button class="editbtn">Click me to turn spans into inputs</button>
</div>

<强> JS

$(document).ready(function (){
    $(document).on("click",'.editbtn',function (){
        $(this).closest(".customerdata").find('span').attr("contenteditable","true");
    });

});

fiddlelink

Answer 2

检查Here

$('button').click(function()
    {

     $('span').each(function()
     {
     $(this).context.innerHTML="";
     $(this).context.innerHTML='<input type= text id = textBox></input>';
     }) 

    });

Answer 3

如果你想在原生javascript中进行..

希望有所帮助

＆＃13;

var elems = document.querySelectorAll("#span-container > div");

 document.getElementById("toggle-btn").addEventListener('click', function(){
    for(var i=0; i< elems.length; i++) {

        if(elems[i].firstElementChild.className.indexOf("see") === -1) {

            elems[i].firstElementChild.className = elems[i].lastElementChild.className += "see";
            elems[i].lastElementChild.value = elems[i].firstElementChild.innerText;

        } else {

            elems[i].firstElementChild.className = elems[i].lastElementChild.className = "";
            elems[i].firstElementChild.innerText = elems[i].lastElementChild.value;

        }
     }
 })

＆＃13;

* {
  padding: 0;
  margin: 0
  box-sizing: border-box;
}

#span-container > div {
  width: 200px;
  height:30px;
  margin: 5px;
}
#span-container > div span{
  display: block;
  width: 100%;
  height: 100%;
}

#span-container > div input {
  height: 100%;
  width: 100%;
  display: none;
}

#span-container > div span.see {
  display: none;
}
#span-container > div input.see {
  display: block;
}

button {
  padding: 4px 2px 6px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: none;
  border: 0;
  cursor: pointer;
  min-width: 75px;
}

＆＃13;

<div id="span-container">
   <div>
      <span>Customer_name</span>
      <input type="text" />   
   </div>
  <div>
      <span>Customer_surname</span>
      <input type="text" />   
  </div>
  <div>
    <span>Customer_surname</span>
    <input type="text" />   
  </div>  
</div>
<button id="toggle-btn">Toggle</button>

＆＃13;

单击按钮更改HTML标记

3 个答案: