Grexsoft Corporation

GrexGuides v0.1 Beta

HTML|Javascript

m eine ganz normale Tabelle mit javascript zu erstellen, reicht es, wenn man folgendes schreibt.

<html>
<head>
<script language=“JavaScript“>
<!–
document.write(„<table><tr><td>dies ist die zelle der tabelle<\/td><\/td><\/table>“ $Var;
//–>
</script>
</head>
<body>

</body>
</html>

Hier wird mit dem befehl „document.write();“ eine ganz normale tabelle in das das document geschrieben.
Da wir jedoch die scriptsprache javascript verwenden, bietet es sich an die tabelle ganz bequem ganz groß zu machen. Dazu muss man zum beispiel folgendes in den script-bereich schreiben:

tab = „<table>“; //hier wird die tabelle göffnet

for(i=0;i<10;i++)
{
tab = tab + „<tr>“;

for(ii=0;ii<10;ii++){
tab = tab + „<td>a</td>“;
}
tab = tab + „</tr>“;
}

tab = tab + „</table>“;
document.write(tab);

Hier haben wir eine 10×10 zellen große tabelle. Die größe läst sich ganz einfach ändern, indem man bei „i<10″ oder „ii<10″ einen anderen wert reinschreibt.

Wenn man jeder tabellenzelle einenindividuellen inhalten geben will, dann könnte man das so machen:

tab = „<table>“;

for(i=0;i<10;i++)
{
tab = tab + „<tr>“;

for(ii=0;ii<10;ii++){
id = i*10 + ii;
tab = tab + „<td id=\“"+id+“\“>“ + id + „</td>“;
}
tab = tab + „</tr>“;
}

tab = tab + „</table>“;
document.write(tab);

um jeder zelle eine id zuzuweisen muss man ‘ id=\“"+id+“\“‘ in das td-tag schreiben, um diese dann auch anzeigen zu lassen, schreibt man die id dann nochmal zwischen den td tags.
Die id besteht aus einer zehnerzahl (‘i*10′) und einer einstellige zahl (‘ii’). i muss mit 10 multipliziert werden, da wir sonst 2 einstellige addieren würde und dadurch einige id’s doppelt hätten.
Falls man nicht 10 zellen pro zeile hat, dann muss man i mit der jeweiligen anzahl der zellen multiplizieren. (multiplizieren bedeutet mal nehmen und addieren beudetet plus rechnen :-)

So eine Tabelle sieht natürlich ganz schön langweilig aus. Deshalb kan man hier js anwenden um etwas schwung in die sache zu bringen. Hier ist der code vor einen tollen farb-effekt (einfach in den dateikopf kopieren):

<script language=“JavaScript“>
<!–

tab = „<table>“;

for(i=0;i<10;i++)
{
tab = tab + „<tr>“;

for(ii=0;ii<10;ii++){
id = i*10 + ii;
farbe = id;
farbe = farbe*5555;
farbe = farbe + 110000;
tab = tab + „<td id=\“"+id+“\“ style=\“background:#“+farbe+“\“>“ + id + „</td>“;
}
tab = tab + „</tr>“;
}

tab = tab + „</table>“;
document.write(tab);
//–>
</script>

Hier wird die id der zellen zum bestimmen des jeweiligen farbwertes genutz. da der farbwert aus einer 6-stelligen zahl bestehen muss, sollt man darauf achten, dass die zahl weder zu groß, noch zu klein wird, da sonst die jeweiligen felder weiß angezeigt werden.

Die id der zellen kann man auch nutzen, um den inhalt einer bestimmten zelle zu verändern. Dazu schreibt man diesen befehl hinter das script, das die tabelle schreiben lässt:

document.getElementById(„irgendeine id“ $Var.innerText = „hier steht der text“;

Hier, bei diesem befehl ersetz man „irgendeine id“ durch die id der zelle.

Upper: Sylber

August 30, 2007 Verfasst von grexx | HTML, Java | | Noch keine Kommentare