Dynamic Tables and Javascript Looping

This article assumes that you know what a dynamic table is and you are familiar with HTML and CSS coding and the use of functions. If what you don't know is the Javascript you need to create a dynamic table then read on. Javascript is not a programming language, it's simpler so you do not need to be a programmer, you just need a bit of logical thinking. This article will outline looping in Javascript, using the document.write() method to write HTML code and variables.

Javascript Loops
In Javascript there are three different kinds of loops, a for-loop, a while-loop and a do-while-loop. A for-loop loops a certain block of code for a prescribed number of times and contains incrementation or decrementation (a counter that is either reduced or increased by one every time the code that you want to loop is run) in the setting up of the loop (as opposed to within the actual block of code you want to loop). A while loop on the other hand usually contains the incrementation or decrementation in the actual block of code and repeats until a condition is met. A do-while-loop is like a while loop except that it does the code once through before checking to see if the condition has been met (if the condition is met before the loop is executed the code will still be executed once).

Syntax for each loop statement
Syntax for each of Javascript's loop statements is outlined below by the use of examples.

The syntax of the for-loop is illustrated as follows:
for (i=0; i < 10; i++)
  {
    document.write("hello");
  }

Here i is a random letter (the norm is i, then j, then k and so on for nested loops), the boolean expression can be replaced by any condition (e.g. i <= 0) and document.write("hello") represents the block of code that you want to repeat. This example will repeat 12 times.

The syntax for the while-loop is as follows:
x = 0
while (x <= 10)
{
  document.write("hello")
  x++
}

Here instead of "i" being the incrementer, x is used and is assigned a value before the loop and incremented from within the code. Until x is greater than or equal to 10, the loop runs. This example will repeat 11 times.

The syntax for the do-while-loop is as follows:
x=0
do {
  document.write("hello")
  x++
}
while (x <= 10)

The syntax is similar to the while-loop except that the while statement goes at the end, ensuring that the code runs at least once. This example will loop 11 times.

Document.write() method
When you use the line document.write() in Javascript, whatever you put between the parentheses (round brackets) gets written to the page. This includes any html or javascript you want written out. Remember two things – firstly you have to put the code you want written out between inverted commas; and secondly if you need to use inverted commas in that code, you must use single inverted commas. For example if I used the code:
<script language="javascript"> document.write("<h1 style='color:blue'>Have a nice day</h1>")</script>
It's the same as writing the code:
<h1 style="color:blue"> Have a nice day </h1>
The <script> tag as above basically states where Javascript begins and ends.

The document.write() method is useful for dynamic table creation as it allows you to write table row (<tr>) and table column (<td>) tags from within Javascript.

Variables
A variable is like a box that contains a certain data-type. The data-type it contains depends on the assigment (creation or replacement) of a variable. For example, if in Javascript you create a variable with the line var a = "monkey", you will be creating a box that contains a string data-type. Other possible data-types include integers, floats, objects and booleans. The keyword "var" is not strictly necessary but is advisable to make sure you don't get your variable names mixed up.

One final thing before we get to the tables itself, in Javascript comments are noted with // for one line comments and enclosed in /* and */ for multi-line comments.

Dynamic tables
Here is some code for creating a dynamic table using a do-while-loop.

function generateTable()
{
  // You can fiddle with these two variables and the table will be created as such.
  var rows=4
  var cols=5
  var i = 0
  var j = 0
  // Create the table object
  document.write("<table cellpadding='0' cellspacing='0' border='2px' width='500px' align='center'>");
  // Use a nested do-while-loop to create the table dynamically
  do{
    document.write("<tr>");
      do{
        document.write("<td> </td>");
        }
        j++;
        }
      while (j < cols)
    document.write("</tr>");
    i++
    /*j has to be reset to 0 otherwise no columns will be created in the next
    loop (since j is now equal to the number of columns)*/
    j=0
    }
  while (i < rows)
  document.write("</table>");
}

And there you have it. Some examples of sites that use Dynamic tables are Africapic.com and Wimbotes.co.za.