Did you find this useful?
Socialize it today.


How to Create a Dynamic Table with JavaScript

Thursday, January 24, 2013

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 the goal is to generate a random number within a range of numbers and storing 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, displaying random images, generating 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 straight forward. This tutorial is not going 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 the 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 we 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>

Demo

The script referenced in the example code generates the following results shown below. If you refresh the page, the results will change. If you would like to see this demo in a seperate window, click on this link.





Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual Murachs JavaScript and DOM Scripting Professional JavaScript for Web Developers