Uitbreiding: Maken van een tabel met een functie

Als je tabel van 3 kolommen en 4 rijen hard coded moet schrijven (volledig uitschrijven) in JavaScript, moet je voor elke tabelrij een statement documen.write() schrijven:

<script language="JavaScript">
document.write(‘<table cellpadding=5 cellspacing=1 border=1>’);
document.write(‘<tr><td>Naam</td><td>Omzet</td><td>Streek</td></tr>’);
document.write(‘<tr><td>Pieters</td><td>90.000</td><td>Ieper</td></tr>’);
document.write(‘<tr><td>Fonteyne</td><td>52.000</td><td>Veurne</td></tr>’);
document.write(‘<tr><td>Blomme</td><td>58.000</td><td>Brugge</td></tr>’);
document.write(‘</table>’);
</script>

We kunnen beter een functie schrijven die een tabelrij op het scherm zet. Voor elke rij die de tabel bevat, roepen we dan een functie aan. Dit heeft als bijkomend voordeel dat we de tabel dynamischer kunnen beheren dan nu het geval is.

De functie maakRij() neemt ons het zware werk uit handen:

function maakRij(naam, omzet, streek)
{
document.write ('<tr><td>’, naam, '</td><td>’, omzet, '<td><td>’, streek, '<td></tr>’);
}

Deze functie bestaat dus eigenlijk maar uit één statement document.write(), dat net zo vaak aangeroepen wordt als er rijen in de tabel zijn. De fuincite kent als argumenten naam, omzet en streek. Merk op dat de functie niets retourneert, hij zet gewoon de tabelrij op het scherm.
De functie wordt vanuit een script elders op de pagina als volgt aangeroepen om hetzelfde resultaat te krijgen als daarnet in hard coded.

<sript language="JavaScript">
document.write(‘<table cellpadding=5 cellspacing=1 border=1>’);
maakRij("Naam", "Omzet", "Streek");
maakRij("Pieters", "90.000", "Ieper");
maakRij("Fonteyne", "52.000", "Veurne");
maakRij("Blomme", "58.000", "Brugge");
document.write(‘</table>’);
</script>

voorbeeld als webpagina

terug