1

Hola estoy intentando insertar una tabla dinámica en mi pagina al momento de hacer click en un botón para en el futuro poder cargar datos de una base de datos y así auto completarla pero de momento tengo el siguiente problema. Lo que ocurre es que al presionar el botón puedo hacer que la tabla aparezca en el <body> pero cuanto intento hacer en un <div> no me resulta, intente darle un id al <div> pero no ocurre nada.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="vie wport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Appular Admin</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../../../../vendors/iconfonts/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="../../../../vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../../../../vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <link rel="stylesheet" href="http://www.urbanui.com/">
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../../../../css/vertical-layout-light/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../../../../images/favicon.png" />
</head>

<body>
  <div class="col-md-6 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <form class="forms-sample">
          <div class="form-group row">
            <label for="exampleInputUsername2" class="col-sm-3 col-form-label">Alumnos en Practica</label>
            <!--<input type="button" value="Genera una tabla" onclick="genera_tabla()"> -->
            <button onclick="return genera_tabla()" class="btn btn-primary mr-2">Submit</button>
            <div class="col-sm-9">
            </div>
          </div>
          <div class="form-group row">
            <div class="col-sm-12">
              <textarea rows="7" class="form-control" id="exampleInputMobile"></textarea>
            </div>
          </div>
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <script>
    function genera_tabla() {
      // Obtener la referencia del elemento body
      var body = document.getElementsByTagName("body")[0];
      // Crea un elemento <table> y un elemento <tbody>
      var tabla = document.createElement("table");
      var tblBody = document.createElement("tbody");
      // Crea las celdas
      for (var i = 1; i < 12; i++) {
        // Crea las hileras de la tabla
        var hilera = document.createElement("tr");
        for (var j = 1; j < 8; j++) {
          // Crea un elemento <td> y un nodo de texto, haz que el nodo de
          // texto sea el contenido de <td>, ubica el elemento <td> al final
          // de la hilera de la tabla
          var celda = document.createElement("td");
          var textoCelda = document.createTextNode("celda en la hilera " + i + ", columna " + j);
          celda.appendChild(textoCelda);
          hilera.appendChild(celda);
        }
        // agrega la hilera al final de la tabla (al final del elemento tblbody)
        tblBody.appendChild(hilera);
      }
      // posiciona el <tbody> debajo del elemento <table>
      tabla.appendChild(tblBody);
      // appends <table> into <body>
      body.appendChild(tabla);
      // modifica el atributo "border" de la tabla y lo fija a "2";
      tabla.setAttribute("border", "2");
      return false;
    }
  </script>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../../../../vendors/js/vendor.bundle.base.js"></script>
  <script src="../../../../vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../../../../js/off-canvas.js"></script>
  <script src="../../../../js/hoverable-collapse.js"></script>
  <script src="../../../../js/template.js"></script>
  <script src="../../../../js/settings.js"></script>
  <script src="../../../../js/todolist.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../../../../js/file-upload.js"></script>
  <script src="../../../../js/iCheck.js"></script>
  <script src="../../../../js/typeahead.js"></script>
  <script src="../../../../js/select2.js"></script>
  <!-- End custom js for this page-->
</body>

</html>
4
  • Pues a mi si me funciona, como lo intentaste?
    – alanfcm
    el 12 feb. 2019 a las 18:11
  • mi idea es agregar un div donde poder ver la tabla no en el body como lo tengo ahora. y eso es lo que no me resulta. el 12 feb. 2019 a las 18:13
  • Te refieres a agregar un div fuera del body del HTML?
    – alanfcm
    el 12 feb. 2019 a las 18:15
  • sorry por no explicarlo bien, mi idea es agregar un div abajo del boton o abajo del Textarea y ahí mostrar la tabla. el 12 feb. 2019 a las 18:17

1 respuesta 1

1

Puedes lograr lo que quieres usando getElementById() asi:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="vie wport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Appular Admin</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../../../../vendors/iconfonts/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="../../../../vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../../../../vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <link rel="stylesheet" href="http://www.urbanui.com/">
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../../../../css/vertical-layout-light/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../../../../images/favicon.png" />
</head>

<body>
  <div class="col-md-6 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <form class="forms-sample">
          <div class="form-group row">
            <label for="exampleInputUsername2" class="col-sm-3 col-form-label">Alumnos en Practica</label>
            <!--<input type="button" value="Genera una tabla" onclick="genera_tabla()"> -->
            <button onclick="return genera_tabla()" class="btn btn-primary mr-2">Submit</button>
            <div class="col-sm-9">
            </div>
          </div>
          <div class="form-group row">
            <div class="col-sm-12">
              <textarea rows="7" class="form-control" id="exampleInputMobile"></textarea>
            </div>
            <div id="div"></div>
          </div>
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <script>
    function genera_tabla() {
      // Obtener la referencia del elemento body
      var body = document.getElementById("div");
      // Crea un elemento <table> y un elemento <tbody>
      var tabla = document.createElement("table");
      var tblBody = document.createElement("tbody");
      // Crea las celdas
      for (var i = 1; i < 12; i++) {
        // Crea las hileras de la tabla
        var hilera = document.createElement("tr");
        for (var j = 1; j < 8; j++) {
          // Crea un elemento <td> y un nodo de texto, haz que el nodo de
          // texto sea el contenido de <td>, ubica el elemento <td> al final
          // de la hilera de la tabla
          var celda = document.createElement("td");
          var textoCelda = document.createTextNode("celda en la hilera " + i + ", columna " + j);
          celda.appendChild(textoCelda);
          hilera.appendChild(celda);
        }
        // agrega la hilera al final de la tabla (al final del elemento tblbody)
        tblBody.appendChild(hilera);
      }
      // posiciona el <tbody> debajo del elemento <table>
      tabla.appendChild(tblBody);
      // appends <table> into <body>
      body.appendChild(tabla);
      // modifica el atributo "border" de la tabla y lo fija a "2";
      tabla.setAttribute("border", "2");
      return false;
    }
  </script>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../../../../vendors/js/vendor.bundle.base.js"></script>
  <script src="../../../../vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../../../../js/off-canvas.js"></script>
  <script src="../../../../js/hoverable-collapse.js"></script>
  <script src="../../../../js/template.js"></script>
  <script src="../../../../js/settings.js"></script>
  <script src="../../../../js/todolist.js"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="../../../../js/file-upload.js"></script>
  <script src="../../../../js/iCheck.js"></script>
  <script src="../../../../js/typeahead.js"></script>
  <script src="../../../../js/select2.js"></script>
  <!-- End custom js for this page-->
</body>

</html>

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.