Ändern Sie das HTML-Tag auf Knopfdruck

Question

Ich erstelle ein Kundenformular für ein Projekt, und während ich sie anzeigen, möchte ich den Benutzer in der Lage sein, auf eine Schaltfläche klicken, um die Kundendaten zu bearbeiten. Hier ist das, was ich brauche:

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

Wenn der Benutzer klicken Sie auf den Button, möchte ich die Spannweiten in Eingaben machen. Jede Hilfe wird geschätzt!

Answer 1

Wenn Sie es in nativer JavaScript tun wollen ..

Hope it

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>

Answer 2

Möchten Sie so?

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 3

prüfen Here

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

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

    });