Estoy tratando de hacer una tabla dinámica, que se le puedan añadir filas, cosa que ya he logrado.
Problema
Al insretar la nueva fila, el valor que habia en las otras filas se borra.
Con este código, logré que se conservara el valor de los inputs(los titulos de las columnas):
document.querySelector('.ctn-table').addEventListener('change', (e)=>{
e.target.setAttribute('value', e.target.value);
});
pero a los <textarea>
(las filas como tal), si se les borra el valor :c...
Es ahora donde no sé que hacer.
Sé que suena un poco confuso mi problema, por eso grabé un pequeño video de unos segundos, mostrando lo que pasa: https://youtu.be/_9uzdyLqvjI
El código para insertar en la tabla es el siguiente:
if(e.target.className == 'agregar-fila'){
let columnsLength = e.target.parentNode.querySelectorAll('.ctn-table .element input').length
let table = e.target.parentNode.querySelector('.ctn-table');
let prepareTable = '';
for(i=1;i<=columnsLength;i++) prepareTable += '<div class="element"><textarea></textarea></div>';
console.log(`numero de columnas: ${columnsLength}, tabla: ${table}, html insertado: ${prepareTable}`);
table.innerHTML += prepareTable;
}
Y el html es:
<div class="popup-tables">
<h2 class="title-table">Titulo tabla</h2>
<div class="ctn-table">
<div class="element"><input type="text" placeholder="titulo"></div>
<div class="element"><input type="text" placeholder="titulo"></div>
{{!-- -------------------------------------- --}}
<div class="element"><textarea></textarea></div>
<div class="element"><textarea></textarea></div>
{{!-- -------------------------------------- --}}
<div class="element"><textarea></textarea></div>
<div class="element"><textarea></textarea></div>
</div>
<div class="agregar-fila">Agregar</div>
</div>
PD: en el css utilizo grid para poner los elementos como una tabla :D