La pregunta en sí se hizo muchas veces, pero no pude encontrar un ejemplo similar al que escribí. Mi solicitud es simple, quiero agregar filas que sean editables. Para hacerlo, creé un botón más que agrega una fila. Desafortunadamente, estas filas no son editables, incluso si el HTML interno está configurado para poder hacerlo.
¿Alguna idea sin jquery?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <style> table, th, td { border: 1px solid black; } </style> <body> <div id="wrapper"> <button id="addRow">+</button> <button id="deleteRow">-</button> <table id="table"> <tbody> <!-- filled by script --> </tbody> </table> </div> <script> // add row document.getElementById("addRow").addEventListener("mouseup", function() { var table = document.getElementById("table") var row = table.insertRow(0); var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); cell0.innerHTML = '<td contenteditable="true">Property</td>'; cell1.innerHTML = '<td contenteditable="true">Value</td>' }) </script> </body> </html>El problema no es contenteditable , el problema es que el código intenta agregar un elemento <td> inmediatamente dentro de un elemento <td> . cell0 y cell1 ya son elementos <td> . El navegador está "corrigiendo" el marcado y eliminando el <td> interno no válido, dejándolo solo con una tabla con texto.
Cambie esos elementos internos <td> a algo como un <div> en su lugar:
cell0.innerHTML = '<div contenteditable="true">Property</div>'; cell1.innerHTML = '<div contenteditable="true">Value</div>'Como otros señalaron, las variables de las celdas ya son elementos <td> . Simplemente puede establecer la propiedad contentEditable en verdadero.
También cambiaría el evento mouseup a un evento de click . El evento mouseup no se activa en las entradas del teclado. Sin embargo, si desea utilizar el mouseup por alguna razón, aún puede hacerlo.
document.getElementById("addRow").addEventListener("click", function() { var table = document.getElementById("table") var row = table.insertRow(0); var cell0 = row.insertCell(0); cell0.contentEditable = true; cell0.textContent = 'Property'; var cell1 = row.insertCell(1); cell1.contentEditable = true; cell1.textContent = 'Value' }) table, th, td { border: 1px solid black; } <div id="wrapper"> <button id="addRow">+</button> <button id="deleteRow">-</button> <table id="table"> <tbody> <!-- filled by script --> </tbody> </table> </div>