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>
div
fuera delbody
del HTML?