Geschrieben von wotanii am 21.06.2006, 10:14

Hier erkläre ich, wie man tabellen mit javascript macht, und was man damit machen kann.
Wie man ganz normale tabellen macht erfahrt ihr unter:
http://www.lima-city.de/tutorials.php?m=show&id=1860
Darauf werde ich hier nicht weiter eingehen.
Dafür beschreibe ich hier, wie man die tabelle mit javascript erstellt und verändern kann.

um 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>");
//-->
</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 10x10 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").innerText = "hier steht der text";

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

Ich hoffe, dieses tut konnte euch weiterhelfen. Sollten fehler auftauchen, dann bitte mir bescheid sagen (per pm), ich kümmer' mich dann darum.

Bewertung Anzahl
6
50,0 %
6 Bewertungen
5
16,7 %
2 Bewertungen
4
16,7 %
2 Bewertungen
3
8,3 %
1 Bewertungen
1
8,3 %
1 Bewertungen