Me gustaría crear una tabla con una columna editable (ahora al hacer clic, al final al hacer clic en el botón). He encontrado un buen tutorial para eso: https://www.youtube.com/watch?v=pNxWUfw1J_w ,

pero las columnas de la tabla están definidas en JS, no en HTML. Cuando trato de implementarlo, la tabla desaparece.

El código:

DEFINICIÓN DE LA TABLA EN HTML

 <div class="table-wrapper"> <div class="progress-border" style="position: sticky; top: 6rem; width: 100%;" ></div> <table id="table-placement" class="table table-striped" <thead class="thead-darker-grey"> <th scope="col" sort-by="type.name"><span>Type</span></th> <th scope="col"></th> <th scope="col" sort-by="description"><span>Description</span></th> <th scope="col" sort-by="company"><span>Company</span></th <th scope="col" sort-by="place"><span>Place</span></th </thead> <tbody> </tbody> </table> </div>

(...)

CREACIÓN DE COLUMNAS DE TABLA Y POBLACIÓN DE DATOS

 function refresh_row(row, values) { var tds = $(row).children('td'); var ii = 0; $(tds[ii]).html(values.type.name); ii++; $(tds[ii]).html(values.description).attr('id', 'description-${obj.id}').data('testid', '${obj.id}'); ii++; $(tds[ii]).html(values.company); ii++; $(tds[ii]).html(values.place); ii++; $(`#description-${obj.id}`).on('click', edit_description) }

(...)

EDICIÓN DESCRIPCIÓN FUNCIÓN

 function edit_description(){ var testid = $(this).data('testid') var value = $(this).html() $(this).html(`<input class="description form-control" data-test="${test-id}" type ="text" value = "${value}">`) }

¿Cómo puedo solucionar esta funcionalidad?