Prozentuale Anteile

Programmieren Sie die folgende Anzeige:

TabelleMitDynamischerProzentanzeige.png

Was ist zu tun?

  1. Füllen Sie ein Array mit den Bezeichnungen der anzuzeigenden Gegenstände!
  2. Füllen Sie ein weiteres Array mit den Prozentwerten der anzuzeigenden Gegenstände!
  3. Erzeugen Sie dynamisch eine Tabelle entsprechend der Anzahl der enthaltenen Werte!
  4. In der ersten Spalte werden die aus dem ersten Array gelesenen Namen angezeigt!
  5. Für die Anzeige der Balken in der zweiten Spalte werden div-Tags mit verschiedenen Weiten genutzt, die aus den Prozentwerten berechnet werden müssen. Sie benötigen:
    • Eine Funktion für die Breitenberechnung mit einem Parameter, in dem der Prozentwert übergeben wird.
    • div-Tags in der zweiten Spalte, welche Sie direkt adressieren können, z.B. mit id1, id2, id3 etc. Die Namen der IDs können Sie z.B. dynamisch ermitteln entsprechend der durchlaufenden Nummerierung der Arrays.
    • Die Breite der Div-Tags können Sie dynamisch setzen, siehe ...
      http://www.w3schools.com/jsref/prop_style_width.asp

Protokoll

  1. Schreiben Sie ein Protokoll, an welchem Punkt Sie gerade arbeiten!
  2. Notieren Sie Ihre Probleme!
  3. Holen Sie sich Tipps von Mitschülern!
  4. Fragen Sie den Lehre, wenn es der Nachbar auch nicht weiss!!
  5. Notieren Sie die Lösungen zu den aufgetretenen Schwierigkeiten!
  6. ...

Beispiellösung

Download
Download2