Nesting Loops in Loops

Loops can be nested inside other loops. This is necessary, for example, to produce a table of information. A table is two dimensional, with rows and columns. Therefore, an outer loop is needed to increment down the rows of the table and an inner loop is needed to increment across the columns of the table.

function makeTable() {
  var tableString = "<table border='1' cellpadding='3'>";
  for (i=1; i<=4; i++) {
    tableString += "<tr>";
    for (j=1; j<=5; j++) {
      tableString += "<td>" + i + "." + j + "</td>";
    }
    tableString += "</tr>";
  }
  tableString += "</table>";
  document.getElementById("tableOut").innerHTML = tableString;
}

function init() {
  var makeTableBtn = document.getElementById("makeTableBtn");
  makeTableBtn.onclick=makeTable;
}

window.onload=init;

<input type="button" value="Make Table" onclick="makeTableBtn"/>
<div id="tableOut"/></div>

Listing 5-11. Code to create a table with nested loops.

The script creates an HTML table, including the necessary <table>, <tr>, and <td> tags. These tags are constructed within a string variable named tableString. Each portion of the table definition is concatenated to this string as the script executes.

The script initially places the opening <table> tag into variable tableString.

tableString = "<table border='1' cellpadding='3'>";

An outer for loop increments index i from 1 through 4, formatting the opening and closing <tr> tag enclosing each of the four rows.

for (i=1; i<=4; i++) {
  tableString += "<tr>";
  for (j=1; j<=5; j++) {
    tableString += "<td>" + i + "." + j + "</td>";
  }
  tableString += "</tr>";
}

For each row, an inner for loop increments index j from 1 through 5, formatting the <td> tag for each of five cells.

for (i=1; i<=4; i++) {
  tableString += "<tr>";
  for (j=1; j<=5; j++) {
    tableString += "<td>" + i + "." + j + "</td>";
  }
  tableString += "</tr>";
}

Each table cell contains a number indicating its row and column. This value is given by concatenating the i index of the row with the j index of the column. Finally, the closing </table> tag is appended to the end of the string, and tableString is written to the innerHTML property of the output division.

tableString += "</table>";
document.getElementById("tableOut").innerHTML = tableString;

It is helpful to visualize how loop variables are incremented for nested loops. Below is a script that shows the values of i and j as a pair of nested loops executes.

function seeLoops() {
  for (i=1; i<=5; i++) {
    display i;
    for (j=1; j<=5; j++) {
      display j;
    }
  }
}

function init() {
  var seeLoopsBtn = document.getElementById("seeLoopsBtn");
  seeLoopsBtn.onclick=seeLoops;
}

window.onload=init;

The outer loop, for(i=1; i<=5; i++), increments variable i from 1 to 5. For each value of i, the inner loop, for(j=1; j<=5; j++), increments variable j from 1 to 5. Just remember that the inner loop completes its iterations for each iteration of the outer loop.

TOP | NEXT: Composing Script References