Skip to main content
Convertir código a fragmento
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

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

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

mi codigo javaScript es el siguiente

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

}
 

Quiero crear una tabla dinamica a lo cual ingreso algunos valores, pero al momento de crear las filas en la tabla el boton no me genera nada.

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

mi codigo javaScript es el siguiente

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

}

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>
 

Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

¿Como crear un elemento html con javaScript?

Quiero crear una tabla dinamica a lo cual ingreso algunos valores, pero al momento de crear las filas en la tabla el boton no me genera nada.

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

mi codigo javaScript es el siguiente

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

}