Dynamic tables built by 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 page will be reloaded every five seconds for the effect to be noticed. Here is the code

<SCRIPT LANGUAGE="JavaScript">
   var picture = new Array(7);
   var title   = new Array(7);
   var caption = new Array(7);

   picture[0]= "red.jpg";
   title[0]  = "Red";
   caption[0]   = "Blood is red";
   
   picture[1]= "yellow.jpg";
   title[1]  = "Yellow";
   caption[1]   = "The buttercup is yellow";
   
   picture[2]= "green.jpg";
   title[2]  = "Green";
   caption[2]   = "Grass is green";
   
   picture[3] = "blue.jpg";
   title[3]   = "Blue";
   caption[3] = "The see is blue";


   picture[4]= "red.jpg";
   title[4]  = "Red";
   caption[4]   = "Blood is red";
   
   picture[5] = "yellow.jpg";
   title[5]   = "Yellow";
   caption[5] = "The buttercup is yellow";
   
   picture[6] = "green.jpg";
   title[6]   = "Green";
   caption[6] = "Grass is green";


   var index = Math.floor(Math.random() * 4);
   document.write("<BR><BR><center>");
   document.write("<table>");
   document.write("<tr>");
   for (i=0; i <4; 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>

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.

Reload the page several times to cover all cases (and everything is nicely centered).

Back