¿Buscas una forma sencilla de organizar y visualizar grandes cantidades de datos en tu sitio web? La respuesta es una tabla dinámica creada con JavaScript. En este artículo te mostraremos cómo crear una tabla dinámica paso a paso – desde la creación de la estructura HTML hasta la implementación de las funciones JavaScript necesarias. ¡Sigue leyendo para aprender cómo hacerlo!
Este tutorial de JavaScript tiene dos goles en mente. El primer objetivol es para mostrarle cómo generar una tabla HTML dinámica, filas y celdas. El segundo gol es generar un número aleatorio dentro de un rango de números y almacenar los valores dentro de la tabla generada dinámicamente.
Generando números aleatorios es una pregunta común que se encuentra en muchos sitios de foros. La generación de números aleatorios es útil en muchos tipos de aplicaciones. Puedes usarlo en juegos que usan dados, muestran imágenes aleatorias, generan enlaces aleatorios, etc.
Tomaremos estos dos goles y desarrolle una solución que cree una tabla HTML generada dinámicamente y llene las celdas con números aleatorios.
Creación de una tabla HTML dinámica
Uso de JavaScript para crear un elemento de tabla dinámica, o cualquier otro elemento para el caso es bastante fácil y directo. Este tutorial no cubrirá los detalles relacionados con el modelo de objetos de documento (DOM) o cómo atravesar el DOM.
Para los propósitos de este tutorial, el ejemplo de código que se muestra a continuación se puede utilizar para crear un elemento de tabla dinámica creando los nodos de elementos e insertándolos en el árbol del documento. si eres nuevo a HTML, es una buena idea leer sobre el modelo de objeto del documento.
Generación de números aleatorios
En JavaScript, podemos usar el Math.random() método para generar un número aleatorio. Este método genera un número aleatorio entre 0-1. Debido a esto, necesitamos multiplicar este valor por el número máximo que queremos incluir en nuestro rango.
En el ejemplo a continuación, dimos un paso adicional al incorporar un rango mínimo y máximo. Además, usamos Math.Floor() método para eliminar los valores después del punto decimal en el valor aleatorio.
Porque estamos usando el Math.floor() método, tenemos que añadir 1 al valor para asegurarse de que la respuesta está dentro del rango porque el Math.floor() El método redondea un número hacia abajo al entero más cercano (simplemente elimina los valores después del punto decimal).
Math.floor() + 1a diferencia de Math.round() asegurará que el resultado no genere más números en el rango más alto de nuestro espectro de números.
Ejemplos para generar números aleatorios
Math.random() // Generates a random number between 0-1, such as 0.4111764545086771
Math.random() * max // If max=10, then the value is 4.111764545086771
Math.floor(Math.random() * max) // Floor rounds down so the value is now 4
Math.floor(Math.random() * max) + 1 // Add 1 due to rounding down. Possible values will be from 1-10, instead of 0-9.
Math.floor(Math.random() * (max - min + 1)) + min // We can introduce a min variable as well so we can have a range.Ejemplo
El siguiente ejemplo de HTML contiene el HTML, CSS y JavaScript necesarios para crear una tabla HTML dinámica. Hay cuatro variables en el bloque JavaScript.
Puede modificar los valores de la variable para ajustar la cantidad de filas en la tabla, la cantidad de celdas dentro de cada fila y el rango mínimo y máximo de números que se utilizan en la generación de números aleatorios. Los números aleatorios generados se colocarán dentro de cada celda de la mesa.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
#div1 {
margin:10px;
font-size:1.25em;
}
table {
border-collapse:collapse;
border:1px solid #7f7f7f;
}
td {
border:1px solid #7f7f7f;
width:50px;height:50px;
text-align:center;
}
</style>
</head>
<body >
<div id="div1"></div>
<script>
var totalRows = 5;
var cellsInRow = 5;
var min = 1;
var max = 10;
function drawTable() {
// get the reference for the body
var div1 = document.getElementById('div1');
// creates a <table> element
var tbl = document.createElement("table");
// creating rows
for (var r = 0; r < totalRows; r++) {
var row = document.createElement("tr");
// create cells in row
for (var c = 0; c < cellsInRow; c++) {
var cell = document.createElement("td");
getRandom = Math.floor(Math.random() * (max - min + 1)) + min;
var cellText = document.createTextNode(Math.floor(Math.random() * (max - min + 1)) + min);
cell.appendChild(cellText);
row.appendChild(cell);
}
tbl.appendChild(row); // add the row to the end of the table body
}
div1.appendChild(tbl); // appends <table> into <div1>
}
window.onload=drawTable;
</script>
</body>
</html>