Dynamic random tables generated with JavaScript

HTML tables dynamically generated by JavaScript

This page shows that several HTML tables can be built by JavaScript in a random circular fashion.

The function Math.random() generates a number between 0 and 1; by multiplying this number by four we obtain a number between 0 and 3. Taking the "floor" of it (the greatest integer smaller than this number: 2.7 becomes 2) we generate a number between 0 and 3, extremes included. If the result is, say, 2, we display the four elements 0+2, 1+2, 2+2, 3+2 etc.

Here il the code:


<SCRIPT LANGUAGE="JavaScript">
   var picture = new Array("red.jpg", "yellow.jpg", "green.jpg", "blue.jpg", "pink.jpg", 
                           "lightBlue.jpg");
   
   var title   = new Array("Red", "Yellow", "Green", "Blue",  
                           "Pink","Light Blue");

   var caption = new Array("Blood is red", "The buttercup is yellow", "Grass is green", "The see is blue",
                           "Pink is a baby-girl", "light blue is a baby-boy");


   var index = Math.floor(Math.random() * 3);
   document.write("<BR><BR><center>");
   document.write("<table>");
   document.write("<tr>");
   for (i=0; i <picture.length -2 ; i++) {
     document.write("<td>");
     document.write("<table border=2>");
     document.write("<tr>");
     document.write("<th align=center>" + title[i + index] + "</th>");
     document.write("</tr>");
     document.write("<tr>");
     document.write("<td align=center>");

     document.write("<IMG SRC='images/" + picture[i + index] + "' WIDTH=96 HEIGHT=120 BORDER=0 ALT=''>");
     document.write("</td>");

	 
	 document.write("</tr>");
     document.write("<tr>");
     document.write("<td align=center>" + caption[i + index] + "</td>");
     document.write("</tr>");
     document.write("</table>");
	 document.write("</td>");
   }
   document.write("</tr>");
   document.write("</table>");

   document.write("</center>");
</SCRIPT>

Let the page reload a few times to cover all cases (and everything is nicely centered).

Back