This JavaScript tutorial has two goals in mind. The first goal is to show you how to generate a dynamic HTML table, rows, and cells. The second goal is to generate a random number within a range of numbers and store the values within the dynamically generated table.
Generating random numbers is a common question found on many forum sites. Generating random numbers is useful in many types of applications. You can use it in games that use dice, display random images, generate random links, etc.
We will take these two goals and develop a solution that will create a dynamically generated HTML table and populate the cells with random numbers.
Creating a Dynamic HTML Table
Using JavaScript to create a dynamic table element, or any other element for that matter is fairly easy and straightforward. This tutorial is not going to cover the details related to the Document Object Model (DOM) or how to traverse the DOM.
For the purposes of this tutorial, the code example shown below can be used to create a dynamic table element by creating the element nodes and inserting them into the document tree. If you are new to HTML, it is a good idea to read up on the Document Object Model.
Generating Random Numbers
In JavaScript, we can use the Math.random() method to generate a random number. This method generates a random number between 0-1. Because of this, we need to multiple this value by the maximum number that we want to include in our range.
In the example below, we took an additional step to incorporate a minimum and maximum range. In addition, we use Math.Floor() method to remove the values after the decimal point in the random value.
Because we are using the Math.floor() method, we need to add 1 to the value to ensure that the answer is within the range because the Math.floor() method rounds a number down to the nearest integer (it simply removes values after the decimal point).
Math.floor() + 1, unlike Math.round() will ensure that the result is not generating more numbers in the higher range of our number spectrum.
Examples for Generating Random Numbers
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.Example
The following HTML example contains the HTML, CSS, and JavaScript necessary to build a dynamic HTML table. There are four variables in the JavaScript block.
You can modify the variable’s values to adjust the number of rows in the table, the number of cells within each row, and the minimum and maximum range of numbers that are used in random number generation. The random numbers generated will be placed within each cell of the table.
<!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>
