Fortschrittsanzeige durch Tabelle realisieren !?

[Karin]

Hallo,

ich schreibe gerade einen Timer mittels JS der eine vom User eingegebene Zeit bis 0 zurückzählt.

Ausgangsituation:
Der Algorithmus ist gar nicht mal das Problem sondern viel mehr, dass ich eine Art Fortschrittsbalken, der Schrittweise (je 10%) die abgelaufene Zeit symbolisieren soll, anzeigen möchte.
Ich weiß das man die Hintergrundfarbe einzelner Zellen ansteuern kann.

Frage:
Ist es möglich in einer Tabelle (HTML) wie der untenstehenden die Zellen einzeln mit einer Schleife zu durchlaufen?
So was wie bei n+1 nächste Zelle grüner Hintergrund und bei n=8 gelber Hintergrund und bei n=9 roter Hintergrund.

<table>
  <tr>
   <td>"n=3"</td>
   <td>"n=8"</td>
   <td>"n=9"</td>
  </tr>
</table>

Oder gibt es eine andere (einfachere) Möglichkeit?

Vielen Dank.

Karin

[Kermit]

Ist es möglich in einer Tabelle (HTML) wie der untenstehenden die Zellen einzeln mit einer Schleife zu durchlaufen?

Ja, mit dem HTML-Attribut id und der Javascript-Funktion document.getElementById.

[Frederik]

Hi!

Der Algorithmus ist gar nicht mal das Problem sondern viel mehr, dass ich eine Art Fortschrittsbalken, der Schrittweise (je 10%) die abgelaufene Zeit symbolisieren soll, anzeigen möchte.
Oder gibt es eine andere (einfachere) Möglichkeit?

Hm, das mit der Tabelle geht bestimmt, aber warum nimmst du nicht einfach ein Div, mit einer festen Höhe und einer Breite, die durch das Skript bestimmt wird? Dann kannst Du sogar feiner als in 10%-Schritten vorgehen.

Liebe Grüße
Fredo

[JürgenB]

Hallo Karin,

in meinem Ritzelrechner findest du eine Balkengrafik, die über divs mit Hintergrundfarbe realisiert wird:

  
xxx.innerHTML=  
   "<div style='padding-left:10px;background-color:"+farbe+";width:"+breite+"px'> "+Text_im_div+"<\/div>" ;  

InnerHTML verwende ich, da die Balken dynamisch erzeugt werden. Eine Änderung der Breite vorhandener divs ist natürlich genauso denkbar, wie deren dynamische Erzeugung mit createElement und appendChild.

Gruß, Jürgen

[Cybaer]

Hi,

Ist es möglich in einer Tabelle (HTML) wie der untenstehenden die Zellen einzeln mit einer Schleife zu durchlaufen?

Z.B.:

  
tdCol=new Array("#FF0000","#00FF00","#0000FF");  
tdObj=document.getElementsByTagName("table")[0].getElementsByTagName("td");  
for(i=0;i<tdObj.length;i++) {  
 tdObj[i].style.backgroundColor=tdCol[i];  
}  

Oder gibt es eine andere (einfachere) Möglichkeit?

S. JürgenB. ;-)

Gruß, Cybaer