單擊按鈕即可更改HTML標簽

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");
    });

});

小提琴

Answer 2

在這里檢查

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

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

    });

Answer 3

如果您要使用本機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>