0

Quiero generar una tabla a partir de 2 input text, para ello quiero usar innerHTML con un for dentro, el problema es que no me genera nada, no se si no se puede meter el for o tengo algo mal

let tabla = document.getElementById("tabla");
let boton = document.getElementById("boton");
let filas = document.getElementById("filas");
let cols = document.getElementById("cols");

boton.onclick = function (e) {
    generarTabla(tabla, validarInput(filas, filas.value), validarInput(cols, cols.value));
}

function validarInput(element, number) {
    if (isNaN(number)) {
        element.value = "";
        element.placeholder = "Numero no valido";
    }
}

function generarTabla(element, rows, cols) {
    element.innerHTML =
        "<table border=1>"
    for (i = 0; i < rows; i++) {
        "<tr>"
        for (j = 0; j < cols; j++) {
            "<td> &nbsp; </td>"
        }
        "</tr>"
    }
    "</table>"
}
Numero de filas: <input type="text" id="filas" maxlength="2" placeholder="">
Numero de columnas: <input type="text" id="cols" maxlength="2" placeholder="">
<input type="button" id="boton" value="Generar Tabla">
<div id="tabla"></div>

1
  • 1
    Deberias revisar bien tu intento, hay tantos fallos que no se por donde empezar ni vale la pena darte una respuesta completa. Arregla esto primero, por favor, y si sigues teniendo problemas actualiza tu pregunta. 1) La función validarInput(element, number) no devuelve nada, por lo tanto la otra función no recibe los datos ni se ejecuta bien. 2) Luego atiende a la respuesta que te acaban de dar, y 3) finalmente pon algo de texto en lugar de espacio para verla bien
    – masterguru
    el 30 may. 2022 a las 9:03

2 respuestas 2

1

Tú puedes mejorar la validación, escuchando los cambios de los input. Aquí, el botón aparece desactivado por defecto, y se activará únicamente cuando ambos input tengan valores válidos. Si introduces 0 y una valor no numérico el botón permanecerá desactivado.

Por otra parte, para construir elementos dinámicos, considera usar DocumentFragment, de este modo no tocarás el DOM constantemente (cada vez que el DOM se modifica todo el contenido es renderizado y eso puede ser muy costoso en documentos grandes). DocumentFragment te permite construir todo en una interfaz intermedia, y al final añades ese fragmento.

Por otra parte, la seguridad también es importante. Cuando creas contenido dinámico, es conveniente usar createElement() combinado con createTextNode(). Esta combinación neutralizará posibles ataques de código dañino.

let mDiv = document.getElementById("tabla");
let boton = document.getElementById("boton");
let filas = document.getElementById("filas");
let cells = document.getElementById("cols");
let allInputs = document.querySelectorAll('input');
let dim = {};

/*
  Validación ...
  Escucha los cambios de los inputs
  El botón se activará solamente cuando haya valores numéricos válidos para filas y columnas
  */
allInputs.forEach(function(item, idx) {
  item.addEventListener('change', function() {
    dim[item.id] = parseInt(item.value) || false;
    var allTrue = Object.keys(dim).every(function(k) {
      return dim[k]
    });
    boton.disabled = !allTrue;
  });

})

boton.onclick = function(e) {
  var fragment = document.createDocumentFragment();
  var mTable = document.createElement('table');
  var mBody = document.createElement("tbody");
  for (i = 0; i < dim.filas; i++) {
    var tr = document.createElement('tr');
    for (j = 0; j < dim.cols; j++) {
      var td = document.createElement('td');
      td.appendChild(document.createTextNode("&nbsp;"));
      tr.appendChild(td);

    }
    mBody.appendChild(tr);
  }
  mTable.appendChild(mBody);
  fragment.appendChild(mTable);
  mDiv.appendChild(fragment);
}
table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}
Numero de filas: <input type="text" id="filas" maxlength="2" placeholder="" /> <br /> Numero de columnas: <input type="text" id="cols" maxlength="2" placeholder="" /> <br />
<input type="button" id="boton" value="Generar Tabla" disabled>
<div id="tabla"></div>

0

Actualmente no está haciendo nada porque estás mezclando la parte de la impresión en la vista con la propia función que recorre los datos.

Para solventar esto deberás crear la tabla fuera del bucle for e ir añadiendo valores después de varias formas.

  • Puedes inicializar una variable string e ir añadiendo una a una las distintas filas de la tabla y cuando tienes todas las filas necesarias la añades al innerHTML.

function generarTabla(element, rows, cols) {
    element.innerHTML = "<table border=1>";
    let generatedRows = '';
    
    for (let i = 0; i < rows; i++) {
        let currentRow = "<tr>";
        for (let j = 0; j < cols; j++) {
            row += "<td> &nbsp; </td>";
        }
        currentRow += "</tr>";
        generatedRows += currentRow;
    }
    
    element.innerHTML += generatedRows;
    element.innerHTML += "</table>";
}

  • Puedes ir añadiendo cada fila al innerHTML conforme se van generando las diferentes filas.

function generarTabla(element, rows, cols) {
    element.innerHTML = "<table border=1>";
    
    for (let i = 0; i < rows; i++) {
        let currentRow = "<tr>";
        for (let j = 0; j < cols; j++) {
            row += "<td> &nbsp; </td>";
        }
        currentRow += "</tr>";
        element.innerHTML += currentRow;
    }
    element.innerHTML += "</table>";
}

En este caso además deberás arreglar la función validarInput y añadirle un return

function validarInput(element, number) {
    if (isNaN(number)) {
        element.value = "";
        element.placeholder = "Numero no valido"
        return;
    }
    return element.value;
}

5
  • 1
    Debes verificar tus respuestas para que sean completas. Esta función solo es parte del problema, y si ahora funciona pues vale, pero nunca recibirá los datos si no arregla tambien la de validarInput, que no devuelve nada.
    – masterguru
    el 30 may. 2022 a las 9:01
  • @masterguru no me di cuenta, fui directamente a la función de generación de la tabla 😓 el 30 may. 2022 a las 9:09
  • Arregla tu respuesta y ya está. Puedes editarla las veces que quieras hasta que esté bien, eso no es problema.
    – masterguru
    el 30 may. 2022 a las 9:10
  • Ejem... la velocidad no va acorde con la precisión en tu caso :-) No te ofendas, eh, lo digo para que des buenas respuestas. Si pones todo eso en un snippet y lo ejecutas verás que sigue sin funcionar por que se espera que la función validarInput() devuelva un valor, no un objeto
    – masterguru
    el 30 may. 2022 a las 9:21
  • Ya lo he arreglado, gracias por la ayuda
    – GreenLass
    el 30 may. 2022 a las 9:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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