How to create an html element with javaScript?

Navigation
0

I want to create a dynamic table to which I enter some values, but when creating the rows in the table the button does not generate anything. 

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>
    
asked by Richard Yordy 06.03.2018 в 13:50
source

3 answers

2

The error is that you have the <button onclick="crearTabla()">Agregar</button> within a form this behaves as if you were to send data by URL I propose that you remove the button of form and it will work perfectly. 

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


Another solution would be to add to the tag <button> the type that is, <button type="button"> and include it within form as you have it. 

<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>
    
answered by 06.03.2018 / 14:43
source
0

Maybe it's because you have an error on line 5 of the code you showed here 

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

It should be: 

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

You were missing the parenthesis. For the rest I think everything is fine. Although I must emphasize that you are creating 4 cells and in the headers you have 3 nothing else. It is not an error but in case you had not noticed it

    
answered by 06.03.2018 в 14:00
0

With 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);
    
answered by 06.03.2018 в 15:25
What is fetch () in MySQLi prepared query? SQL orders last quarter [duplicated]