0

Quiero crear una tabla dinámica a lo cual ingreso algunos valores, pero al momento de crear las filas en la tabla el botón no me genera nada.

var div = document.getElementById("divTabla");

function crearTabla() {
  var nombre = document.getElementById("nombre").value,
    edad = document.getElementById("edad").value,
    sexo = document.getElementById("sexo".value);

  var columna = document.createElement("tr"),
    celdaNombre = document.createElement("td"),
    celdaEdad = document.createElement("td"),
    celdaSexo = document.createElement("td"),
    celda = document.createElement("td");

  celdaNombre.innerHTML = nombre;
  celdaEdad.innerHTML = edad;
  celdaSexo.innerHTML = sexo;
  celda.innerHTML = "Temporal";

  columna.appendChild(celdaNombre);
  columna.appendChild(celdaEdad);
  columna.appendChild(celdaSexo);
  columna.appendChild(celda);


  tabla = document.getElementById("tabla").appendChild(columna);

}
<div>
  <form>
    <input type="text" name="nombre" id="nombre" placeholder="Ingrese nombre">
    <input type="text" name="edad" id="edad" placeholder="ingrese Edad">
    <select name="sexo" id="sexo">
        <option value="Hombre">Hombre</option>
        <option value="Mujer">Mujer</option>
    </select>
    <button onclick="crearTabla()">Agregar</button>
  </form>
  <br><br>
</div>
<div id="divTabla" class="egt">
  <table id="tabla">
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
      <th>Sexo</th>
    </tr>
    <tr>

    </tr>
  </table>
</div>

1
  • Parece ir bien, se añaden las celdas. ¿Cómo es que no funciona?
    – Alvaro Montoro
    Commented el 6 mar. 2018 a las 14:31

3 respuestas 3

2

El error es que tienes el <button onclick="crearTabla()">Agregar</button> dentro de un form este se comporta como si fueras a enviar datos por URL propongo que saques el button del form y funcionara perfectamente.

<form>
      <input type="text" name="nombre" id="nombre" placeholder="Ingrese nombre">
      <input type="text" name="edad" id="edad" placeholder="ingrese Edad">
      <select name="sexo" id="sexo">
         <option value="Hombre">Hombre</option>
         <option value="Mujer">Mujer</option>
      </select>
</form>
<button onclick="crearTabla()">Agregar</button>


Otra solucion seria agregarle al tag <button> el tipo es decir, <button type="button"> e incluirlo dentro del form tal como lo tienes.

<form>
      <input type="text" name="nombre" id="nombre" placeholder="Ingrese nombre">
      <input type="text" name="edad" id="edad" placeholder="ingrese Edad">
      <select name="sexo" id="sexo">
          <option value="Hombre">Hombre</option>
          <option value="Mujer">Mujer</option>
       </select>
       <button type="button" onclick="crearTabla()">Agregar</button>
</form>
3
  • @RichardYordy Si te funciono o no?
    – zerokira
    Commented el 6 mar. 2018 a las 14:24
  • si @Pablo ya funciono.. de hecho con solo sacar el button funciono todo correctamente. muchas gracias..
    – Richard
    Commented el 7 mar. 2018 a las 0:38
  • @RichardYordy sabes que...Funciona correctamente estando dentro del form pero agregandole a la etiqueta <button> el tipo, es decir <button type="button">, Saludos
    – zerokira
    Commented el 7 mar. 2018 a las 13:23
0

Tal vez sea porque tienes un error en la línea 5 del código que mostrastes aquí

sexo = document.getElementById("sexo".value);

Debe ser:

sexo = document.getElementById("sexo").value;

Te faltaba el paréntesis. Por lo demás creo que todo está bien. Aunque debo resaltar que estas creando 4 celdas y en las cabeceras tienes 3 nada más. No es un error pero por si no lo habías notado

1
  • Ya lo verifique pero sigue igual.. ese error solo evita que que aparesca el sexo, lo de las celdas si lo note pero pero en realidad no afecta solo afecta en el diseño de la tabla que estoy creando.
    – Richard
    Commented el 6 mar. 2018 a las 13:37
0

Con Jquery

/* Note that the whole content variable is just a string */
/*El limite del contador del for es 3 pero ahi va el que tu quieras segun los datos que tengas*/
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'Name ' +  '</td><td>' + 'Edad' + '</td><td>' + 'Sexo' '</td></tr>';
}
content += "</table>";

$('#here_table').append(content);

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.