1

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

2 respuestas 2

1

Hay dos cosas interesantes en tu ejemplo. Te voy a sugerir una manera alternativa de agregar filas a esa estructura que tiene la ventaja de mantener el cursor donde esté (y otras cosas similares) y segundo te voy a sugerir un cambio en la forma de agregar elementos.

Primero, manteniendo tu estilo

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;
  }

se puede mejorar cambiando la asignación a innerHTML. Recordemos que += es lo mismo que decir table.innerHTML = table.innerHTML + prepareTable; o sea se está borrando y reconstruyendo la tabla. Se le está volviendo a asignar todo. Para realmente agregar sin tocar lo que existe (los objetos que ya están en pantalla) se puede hacer algo como:

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');
    for(i=1;i<=columnsLength;i++){
       var div = document.createElement('div');
       div.className="element";
       div.innerHTML='<textarea></textarea>';
       table.appendChild(div);
    }
    console.log(`numero de columnas: ${columnsLength}, tabla: ${table});
  }

De ese modo y gracias a appendChild se agregan los elementos que se necesiten (ya creados) en forma de objetos y no de texto html. Además los objetos que ya estaban en la pantalla mantienen todas sus propiedades. Si además la tabla es grande y el navegador es lento no habrá parpadeo.

Por otro lado te sugiero que en vez de usar destino.innerHTML=<div>...</div> para crear objetos uses document.createElement. La principal ventaja la vas a tener cuando quieras crear un objeto con un dato. Por ejemplo elementoNombre.innerHTML='<div class="nombre">'+empresa.nombre+'</div> porque ahí pueden aparecer cosas raras cuando empresa.nombre tenga algún caracter raro como < o > o &.

Una alternativa podría ser usar la llamada directa:

var div = document.createElement('div');
div.className='nombre';
div.id='el-id';
div.textContent=empresa.nombre;
elementoDestino.appendChild(div);

Claro que es un poco más largo, pero es más seguro. Se destaca ahí el cambio de textContent en vez de innerHTML, lo que hace que incluya en forma segura todo el texto como texto y se escapen los caracteres especiales para que se vean bien en pantalla. por ejemplo e.textContent = 'a<b>c' (o sea a menor que b mayor que c) se verá en pantalla como a<b>c en cambio e.innerHTML = 'a<b>c' se verá como 'ac' (la c en negrita y la b es el indicador de bold).

Para hacerlo más conciso se puede tener una función:

function elemento(tag, atributos, contenido){
  var nuevoElemento = document.createElement(tag);
  if(atributos){
    for(var nombre in atributos) if(atributo.hasOwnProperty(nombre)){
      nuevoElemento[nombre] = atributos[nombre] 
    }
  }
  if(contenido){
    contenido.forEach(function(elementoInterno){
      nuevoElemento.appendChild(elementoInterno)
    })
  }
  return nuevoElemento;
}

Se usaría así:

table.appendChild(elemento('div',{className:'element'},[
  elemento('textarea')
]);

la función elemento recibe el nombre del elemento, sus atributos y la lista de cosas que tiene adentro (si hay). Para tu ejemplo el table.innerHTML+='<div class="element"><textarea></textarea></div>';

0

Por si a alguien le interesa, ya encontré una respuesta, me dí cuenta de que el atributo value, no sirve para los textarea, pero si para los inputs, asi que para los textarea había que simplemente agregarles un innerHTML

dicho esto la solución fue tan simple como:

document.querySelector('.ctn-table').addEventListener('change', (e)=>{
    if(e.target.tagName.toLowerCase() == 'input'){
        e.target.setAttribute('value',  e.target.value);
    }else{
        e.target.innerHTML = e.target.value;
    }
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.