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
    Commented 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. Commented el 12 feb. 2019 a las 18:13
  • Te refieres a agregar un div fuera del body del HTML?
    – alanfcm
    Commented 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. Commented 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

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.