HTML-Textfeld in Tabelle wird zu einem Label

Question

Ich habe derzeit eine Tabelle, die Textfeld für Benutzer zum Ausfüllen enthält. Ich habe auch eine Schaltfläche, die den Textfeld Wert in eine Bezeichnung oder nur eine Zeichenfolge für die Anzeige.

Lassen Sie uns sagen, sieht die Tabelle Code wie dieser

<table> 
    <tr> 
     <td><input type="text" name="box1"></td> 
     <td><input type="text" name="box2"></td> 
    </tr> 

    <tr> 
     <td><input type="text" name="box3"></td> 
     <td><input type="text" name="box4"></td> 
    </tr> 

    <tr> 
     <td><input type="text" name="box5"></td> 
     <td><input type="text" name="box6"></td> 
    </tr> 
</table> 

Der Code-Taste wie diese

<button id="convert">Press me</button> 

sieht Nachdem ich die Taste gedrückt wird, möchte ich das Textfeld der Textbeschriftung wird, was Wie denkst du, dass ich mit diesem Problem umgehen kann? Ich habe keine Probleme mit jeder Art von Code, PHP, Javascript wird eine bessere Option für mich sein.

Dank

Answer 1

Attach-Ereignishandler der Schaltfläche und innerhalb der Callback Iterierte klicken und das Etikett auf dem Wert basiert erzeugen.

// attach click event handler 
 
document.getElementById('convert').addEventListener('click', function() { 
 
    // get all input element and convert 
 
    // into array using Array.from or 
 
    // use [].slice.call for older browser 
 
    // and then iterate over them 
 
    Array.from(document.querySelectorAll('table input')).forEach(function(ele) { 
 
    // generate label element 
 
    var label = document.createElement('label'); 
 
    // update the html content with input value 
 
    label.innerHTML = ele.value; 
 
    // replace the input element with label 
 
    ele.parentNode.replaceChild(label, ele); 
 
    }); 
 
})

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="text" name="box1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="box2"> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input type="text" name="box3"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="box4"> 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input type="text" name="box5"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="box6"> 
 
    </td> 
 
    </tr> 
 
    <table> 
 
    <button id="convert">Press me</button>

Answer 2

ist hier jquery Version.

Referenzen: jQuery-replaceWith.

$('#convert').click(function(){ 
    $('input').each(function(){ 
     var value=$(this).val(); 
     $(this).replaceWith('<label>' + value+'</label>'); 
    }); 
}); 

$('#convert').click(function(){ 
 
    $('input').each(function(){ 
 
    \t var value=$(this).val(); 
 
     $(this).replaceWith('<label>' + value+'</label>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td><input type="text" name="box1"></td> 
 
     <td><input type="text" name="box2"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="box3"></td> 
 
     <td><input type="text" name="box4"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <td><input type="text" name="box5"></td> 
 
     <td><input type="text" name="box6"></td> 
 
    </tr> 
 
</table> 
 
<button id="convert">Press me</button>