javascript - 单击按钮即可更改HTML标签

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

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

当用户单击按钮时，我希望跨度变为输入。
任何帮助将不胜感激！

最佳答案

如果您要使用本机javascript。

希望能帮助到你

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;

        }
     }
 })

* {
  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;
}

<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>

关于javascript - 单击按钮即可更改HTML标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46091831/