Geneste lussen

Om complexere structuren zoals tabellen met rijen en kolommen op de bouwen, gebruik je een lus binnen een lus. In elke rij plaatsen we een aantal cellen die de kolommen vormen. De buitenste lus doorloopt dan de rijen, de binnenste lus de kolommen. Het gebruik van een lus binnen een lus noemen we lussen nesten.

Een eenvoudige tabel met twee rijen en twee kolommen bestaat uit de volgende HTML code:

<table id="tabel">
  <tr>
    <td>A1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
  </tr>
</table>

De <tr></tr> tag zorgt binnen een tabel voor een rij.
De <td></td> tag zorgt binnen een rij voor een cel (kolom).

Voorbeeld:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Nesten</title>
</head>
<body>
  <div id="tabel"></div>
  <script type="text/javascript">
    var tabel = "<table>";
    for(rij = 1; rij <= 7; rij++){
      tabel += "<tr>";
      for(kolom = 1; kolom <= 10; kolom++){
	tabel += "<td>" + String.fromCharCode(64 + kolom) + rij + "</td>";
      }
      tabel += "</tr>";
    }
    document.getElementById("tabel").innerHTML = tabel + "</table>";
  </script>
</body>
</html>
Weergeven

De opdracht String.fromCharCode(ASCII code) zet een getal (ASCII code) om naar een letter (de ASCII code 65 komt overeen met een hoofdletter A).