Jörg Kruses Webmaster-Forum > JavaScript

Zellenfarbe ändern

1 Cutter

Hallo!

Ich möchte mittels JavaScript die Zellen-Hintergrundfarbe ändern wenn der Zellwert < 100 ist.
Die Farbe soll dann auf Rot umschalten. Und nur in den Zellen, in denen ein Zahlenwert enthalten ist (siehe Tabelle).
Mit Google habe ich leider nichts passendes gefunden. Vieleicht kann mir hier im Forum jemand weiter helfen. Bin für jede Hilfe oder Tip dankbar.

<table>
<thead>
<!-- Zeile 1 -->
<tr>
<td id="g_sum_ob" class="gesamt" colspan="10">0,00</td>
</tr>
<!-- Zeile 2 -->
<tr>
<td id="ob_sum_spA" class="tfoot">0,00</td>
<td id="ob_sum_spB" class="tfoot">0,00</td>
<td id="ob_sum_spC" class="tfoot">0,00</td>
<td id="ob_sum_spD" class="tfoot">0,00</td>
<td id="ob_sum_spE" class="tfoot">0,00</td>
<td id="ob_sum_spF" class="tfoot">0,00</td>
<td id="ob_sum_spG" class="tfoot">0,00</td>
<td id="ob_sum_spH" class="tfoot">0,00</td>
<td id="ob_sum_spI" class="tfoot">0,00</td>
<td id="ob_sum_spJ" class="tfoot">0,00</td>
</tr>
</thead>
<!-- Zeile 3 -->
<tr>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
</tr>
<!-- Zeile 4 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="AUD-CAD.html"target="_parent">AUD-CAD</a></td>
<td class="thead">
<a class="thead1"href="AUD-CHF.html"target="_parent">AUD-CHF</a></td>
<td class="thead">
<a class="thead1"href="AUD-JPY.html"target="_parent">AUD-JPY</a></td>
<td class="thead">
<a class="thead1"href="AUD-NOK.html"target="_parent">AUD-NOK</a></td>
<td class="thead">
<a class="thead1"href="AUD-NZD.html"target="_parent">AUD-NZD</a></td>
<td class="thead">
<a class="thead1"href="AUD-PLN.html"target="_parent">AUD-PLN</a></td>
<td class="thead">
<a class="thead1"href="AUD-SEK.html"target="_parent">AUD-SEK</a></td>
<td class="thead">
<a class="thead1"href="AUD-SGD.html"target="_parent">AUD-SGD</a></td>
<td class="thead">
<a class="thead1"href="AUD-USD.html"target="_parent">AUD-USD</a></td>
<td class="thead">
<a class="thead1"href="CAD-CHF.html"target="_parent">CAD-CHF</a></td>
</tr>
</thead>
<!-- Zeile 5 -->
<tbody>
<tr>
<td id="audcad"class="tbody">74,80</td>
<td id="audchf"class="tbody">12,20</td>
<td id="audjpy"class="tbody">52,10</td>
<td id="audnok"class="tbody">74,80</td>
<td id="audnzd"class="tbody">12,20</td>
<td id="audpln"class="tbody">52,10</td>
<td id="audsek"class="tbody">74,80</td>
<td id="audsgd"class="tbody">12,20</td>
<td id="audusd"class="tbody">52,10</td>
<td id="cadchf"class="tbody">52,10</td>
</tr>
</tbody>
<!-- Zeile 6 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 7 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="CAD-JPY.html"target="_parent">CAD-JPY</a></td>
<td class="thead">
<a class="thead1"href="CAD-PLN.html"target="_parent">CAD-PLN</a></td>
<td class="thead">
<a class="thead1"href="CAD-SGD.html"target="_parent">CAD-SGD</a></td>
<td class="thead">
<a class="thead1"href="CHF-DKK.html"target="_parent">CHF-DKK</a></td>
<td class="thead">
<a class="thead1"href="CHF-JPY.html"target="_parent">CHF-JPY</a></td>
<td class="thead">
<a class="thead1"href="CHF-NOK.html"target="_parent">CHF-NOK</a></td>
<td class="thead">
<a class="thead1"href="CHF-PLN.html"target="_parent">CHF-PLN</a></td>
<td class="thead">
<a class="thead1"href="CHF-SEK.html"target="_parent">CHF-SEK</a></td>
<td class="thead">
<a class="thead1"href="CHF-SGD.html"target="_parent">CHF-SGD</a></td>
<td class="thead">
<a class="thead1"href="CHF-TRY.html"target="_parent">CHF-TRY</a></td>
</tr>
</thead>
<!-- Zeile 8 -->
<tbody>
<tr>
<td id="cadjpy"class="tbody">13,80</td>
<td id="cadpln"class="tbody">-24,20</td>
<td id="cadsgd"class="tbody">-45,10</td>
<td id="chfdkk"class="tbody">13,80</td>
<td id="chfjpy"class="tbody">-24,20</td>
<td id="chfnok"class="tbody">-45,10</td>
<td id="chfpln"class="tbody">13,80</td>
<td id="chfsek"class="tbody">-24,20</td>
<td id="chfsgd"class="tbody">-45,10</td>
<td id="chftry"class="tbody">-45,10</td>
</tr>
<!-- Zeile 9 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
</tbody>
<!-- Zeile 10 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="DKK-JPY.html"target="_parent">DKK-JPY</a></td>
<td class="thead">
<a class="thead1"href="EUR-AUD.html"target="_parent">EUR-AUD</a></td>
<td class="thead">
<a class="thead1"href="EUR-CAD.html"target="_parent">EUR-CAD</a></td>
<td class="thead">
<a class="thead1"href="EUR-CHF.html"target="_parent">EUR-CHF</a></td>
<td class="thead">
<a class="thead1"href="EUR-GBP.html"target="_parent">EUR-GBP</a></td>
<td class="thead">
<a class="thead1"href="EUR-HKD.html"target="_parent">EUR-HKD</a></td>
<td class="thead">
<a class="thead1"href="EUR-HUF.html"target="_parent">EUR-HUF</a></td>
<td class="thead">
<a class="thead1"href="EUR-JPY.html"target="_parent">EUR-JPY</a></td>
<td class="thead">
<a class="thead1"href="EUR-MXN.html"target="_parent">EUR-MXN</a></td>
<td class="thead">
<a class="thead1"href="EUR-NOK.html"target="_parent">EUR-NOK</a></td>
</tr>
</thead>
<!-- Zeile 11 -->
<tbody>
<tr>
<td id="dkkjpy"class="tbody">74,80</td>
<td id="euraud"class="tbody">12,20</td>
<td id="eurcad"class="tbody">52,10</td>
<td id="eurchf"class="tbody">74,80</td>
<td id="eurgbp"class="tbody">12,20</td>
<td id="eurhkd"class="tbody">52,10</td>
<td id="eurhuf"class="tbody">74,80</td>
<td id="eurjpy"class="tbody">12,20</td>
<td id="eurmxn"class="tbody">52,10</td>
<td id="eurnok"class="tbody">52,10</td>
</tr>
</tbody>
<!-- Zeile 12 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 13 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="EUR-NZD.html"target="_parent">EUR-NZD</a></td>
<td class="thead">
<a class="thead1"href="EUR-PLN.html"target="_parent">EUR-PLN</a></td>
<td class="thead">
<a class="thead1"href="EUR-SEK.html"target="_parent">EUR-SEK</a></td>
<td class="thead">
<a class="thead1"href="EUR-SGD.html"target="_parent">EUR-SGD</a></td>
<td class="thead">
<a class="thead1"href="EUR-TRY.html"target="_parent">EUR-TRY</a></td>
<td class="thead">
<a class="thead1"href="EUR-USD.html"target="_parent">EUR-USD</a></td>
<td class="thead">
<a class="thead1"href="GBP-AUD.html"target="_parent">GBP-AUD</a></td>
<td class="thead">
<a class="thead1"href="GBP-CAD.html"target="_parent">GBP-CAD</a></td>
<td class="thead">
<a class="thead1"href="GBP-CHF.html"target="_parent">GBP-CHF</a></td>
<td class="thead">
<a class="thead1"href="GBP-DKK.html"target="_parent">GBP-DKK</a></td>
</tr>
</thead>
<!-- Zeile 14 -->
<tbody>
<tr>
<td id="eurnzd"class="tbody">13,80</td>
<td id="eurpln"class="tbody">-24,20</td>
<td id="eursek"class="tbody">-45,10</td>
<td id="eursgd"class="tbody">13,80</td>
<td id="eurtry"class="tbody">-24,20</td>
<td id="eurusd"class="tbody">-45,10</td>
<td id="gbpaud"class="tbody">13,80</td>
<td id="gbpcad"class="tbody">-24,20</td>
<td id="gbpchf"class="tbody">-45,10</td>
<td id="gbpdkk"class="tbody">-45,10</td>
</tr>
</tbody>
<!-- Zeile 15 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 16 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="GBP-EUR.html"target="_parent">GBP-EUR</a></td>
<td class="thead">
<a class="thead1"href="GBP-JPY.html"target="_parent">GBP-JPY</a></td>
<td class="thead">
<a class="thead1"href="GBP-NOK.html"target="_parent">GBP-NOK</a></td>
<td class="thead">
<a class="thead1"href="GBP-NZD.html"target="_parent">GBP-NZD</a></td>
<td class="thead">
<a class="thead1"href="GBP-PLN.html"target="_parent">GBP-PLN</a></td>
<td class="thead">
<a class="thead1"href="GBP-SEK.html"target="_parent">GBP-SEK</a></td>
<td class="thead">
<a class="thead1"href="GBP-SGD.html"target="_parent">GBP-SGD</a></td>
<td class="thead">
<a class="thead1"href="GBP-USD.html"target="_parent">GBP-USD</a></td>
<td class="thead">
<a class="thead1"href="GBP-ZAR.html"target="_parent">GBP-ZAR</a></td>
<td class="thead">
<a class="thead1"href="HKD-JPY.html"target="_parent">HKD-JPY</a></td>
</tr>
</thead>
<!-- Zeile 17 -->
<tbody>
<tr>
<td id="gbpeur"class="tbody">74,80</td>
<td id="gbpjpy"class="tbody">12,20</td>
<td id="gbpnok"class="tbody">52,10</td>
<td id="gbpnzd"class="tbody">74,80</td>
<td id="gbppln"class="tbody">12,20</td>
<td id="gbpsek"class="tbody">52,10</td>
<td id="gbpsgd"class="tbody">74,80</td>
<td id="gbpusd"class="tbody">12,20</td>
<td id="gbpzar"class="tbody">52,10</td>
<td id="hkdjpy"class="tbody">52,10</td>
</tr>
</tbody>
<!-- Zeile 18 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 19 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="JPY-NOK.html"target="_parent">JPY-NOK</a></td>
<td class="thead">
<a class="thead1"href="MXN-JPY.html"target="_parent">MXN-JPY</a></td>
<td class="thead">
<a class="thead1"href="NOK-DKK.html"target="_parent">NOK-DKK</a></td>
<td class="thead">
<a class="thead1"href="NOK-JPY.html"target="_parent">NOK-JPY</a></td>
<td class="thead">
<a class="thead1"href="NOK-SEK.html"target="_parent">NOK-SEK</a></td>
<td class="thead">
<a class="thead1"href="NZD-AUD.html"target="_parent">NZD-AUD</a></td>
<td class="thead">
<a class="thead1"href="NZD-CAD.html"target="_parent">NZD-CAD</a></td>
<td class="thead">
<a class="thead1"href="NZD-CHF.html"target="_parent">NZD-CHF</a></td>
<td class="thead">
<a class="thead1"href="NZD-JPY.html"target="_parent">NZD-JPY</a></td>
<td class="thead">
<a class="thead1"href="NZD-SGD.html"target="_parent">NZD-SGD</a></td>
</tr>
</thead>
<!-- Zeile 20 -->
<tbody>
<tr>
<td id="jpynok"class="tbody">13,80</td>
<td id="mxnjpy"class="tbody">-24,20</td>
<td id="nokdkk"class="tbody">-45,10</td>
<td id="nokjpy"class="tbody">13,80</td>
<td id="noksek"class="tbody">-24,20</td>
<td id="nzdaud"class="tbody">-45,10</td>
<td id="nzdcad"class="tbody">13,80</td>
<td id="nzdchf"class="tbody">-24,20</td>
<td id="nzdjpy"class="tbody">-45,10</td>
<td id="nzdsgd"class="tbody">-45,10</td>
</tr>
</tbody>
<!-- Zeile 21 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 22 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="NZD-USD.html"target="_parent">NZD-USD</a></td>
<td class="thead">
<a class="thead1"href="PLN-JPY.html"target="_parent">PLN-JPY</a></td>
<td class="thead">
<a class="thead1"href="SEK-JPY.html"target="_parent">SEK-JPY</a></td>
<td class="thead">
<a class="thead1"href="SEK-NOK.html"target="_parent">SEK-NOK</a></td>
<td class="thead">
<a class="thead1"href="SGD-JPY.html"target="_parent">SGD-JPY</a></td>
<td class="thead">
<a class="thead1"href="TRY-JPY.html"target="_parent">TRY-JPY</a></td>
<td class="thead">
<a class="thead1"href="USD-CAD.html"target="_parent">USD-CAD</a></td>
<td class="thead">
<a class="thead1"href="USD-CHF.html"target="_parent">USD-CHF</a></td>
<td class="thead">
<a class="thead1"href="USD-CNH.html"target="_parent">USD-CNH</a></td>
<td class="thead">
<a class="thead1"href="USD-CZK.html"target="_parent">USD-CZK</a></td>
</tr>
</thead>
<!-- Zeile 23 -->
<tbody>
<tr>
<td id="nzdusd"class="tbody">74,80</td>
<td id="plnjpy"class="tbody">12,20</td>
<td id="sekjpy"class="tbody">52,10</td>
<td id="seknok"class="tbody">74,80</td>
<td id="sgdjpy"class="tbody">12,20</td>
<td id="tryjpy"class="tbody">52,10</td>
<td id="usdcad"class="tbody">74,80</td>
<td id="usdchf"class="tbody">12,20</td>
<td id="usdcnh"class="tbody">52,10</td>
<td id="usdczk"class="tbody">52,10</td>
</tr>
</tbody>
<!-- Zeile 24 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 25 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="USD-DKK.html"target="_parent">USD-DKK</a></td>
<td class="thead">
<a class="thead1"href="USD-HUF.html"target="_parent">USD-HUF</a></td>
<td class="thead">
<a class="thead1"href="USD-JPY.html"target="_parent">USD-JPY</a></td>
<td class="thead">
<a class="thead1"href="USD-MXN.html"target="_parent">USD-MXN</a></td>
<td class="thead">
<a class="thead1"href="USD-NOK.html"target="_parent">USD-NOK</a></td>
<td class="thead">
<a class="thead1"href="USD-PLN.html"target="_parent">USD-PLN</a></td>
<td class="thead">
<a class="thead1"href="USD-RUB.html"target="_parent">USD-RUB</a></td>
<td class="thead">
<a class="thead1"href="USD-SEK.html"target="_parent">USD-SEK</a></td>
<td class="thead">
<a class="thead1"href="USD-SGD.html"target="_parent">USD-SGD</a></td>
<td class="thead">
<a class="thead1"href="USD-TRY.html"target="_parent">USD-TRY</a></td>
</tr>
</thead>
<!-- Zeile 26 -->
<tbody>
<tr>
<td id="usddkk"class="tbody">13,80</td>
<td id="usdhuf"class="tbody">-24,20</td>
<td id="usdjpy"class="tbody">-45,10</td>
<td id="usdmxn"class="tbody">13,80</td>
<td id="usdnok"class="tbody">-24,20</td>
<td id="usdpln"class="tbody">-45,10</td>
<td id="usdrub"class="tbody">13,80</td>
<td id="usdsek"class="tbody">-24,20</td>
<td id="usdsgd"class="tbody">-45,10</td>
<td id="usdtry"class="tbody">-45,10</td>
</tr>
</tbody>
<!-- Zeile 27 -->
<tr>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
<td class="leer"></td>
</tr>
<!-- Zeile 28 -->
<thead>
<tr>
<td class="thead">
<a class="thead1"href="USD-ZAR.html"target="_parent">USD-ZAR</a></td>
<td class="thead">
<a class="thead1"href="ZAR-JPY.html"target="_parent">ZAR-JPY</a></td>
<td class="thead">
<a class="thead1"href="DowJones.html"target="_parent">DowJones</a></td>
<td class="thead">
<a class="thead1"href="S_P.html"target="_parent">S_P</a></td>
<td class="thead">
<a class="thead1"href="Nasdaq.html"target="_parent">Nasdaq</a>
</td>
<td class="thead">
<a class="thead1"href="Nikkei.html"target="_parent">Nikkei</a>
</td>
<td class="thead">
<a class="thead1"href="DAX30.html"target="_parent">DAX30</a>
</td>
</tr>
</thead>
<!-- Zeile 29 -->
<tbody>
<tr>
<td id="usdzar"class="tbody">74,80</td>
<td id="zarjpy"class="tbody">12,20</td>
<td id="dowjones"class="tbody">52,10</td>
<td id="s_p"class="tbody">74,80</td>
<td id="nasdaq"class="tbody">12,20</td>
<td id="nikkei"class="tbody">52,10</td>
<td id="dax30"class="tbody">74,80</td>
</tr>
</tbody>
<!-- Zeile 30 -->
<tr>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
<td class="leer0"></td>
</tr>
<!-- Zeile 31 -->
<tfoot>
<tr>
<td id="sum_spA_un" class="tfoot">0,00</td>
<td id="sum_spB_un" class="tfoot">0,00</td>
<td id="sum_spC_un" class="tfoot">0,00</td>
<td id="sum_spD_un" class="tfoot">0,00</td>
<td id="sum_spE_un" class="tfoot">0,00</td>
<td id="sum_spF_un" class="tfoot">0,00</td>
<td id="sum_spG_un" class="tfoot">0,00</td>
<td id="sum_spH_un" class="tfoot">0,00</td>
<td id="sum_spI_un" class="tfoot">0,00</td>
<td id="sum_spJ_un" class="tfoot">0,00</td>
</tr>
<!-- Zeile 32 -->
<tr>
<td id="g_sum_un" class="gesamt" colspan="10">0,00</td>
</tr>
</tfoot>
</table>
</div>

Mit freundlichen Grüssen

Cutter

[Edit Jörg: Code-Block eingefügt]

2 Jörg Kruse

Wie wird diese Tabelle denn erzeugt? normalerweise würde man den Tabellenzellen bei der Erstellung eine Klasse mitgeben, die man per CSS rot einfärben kann

<td id="s_p"class="tbody unter-100">74,80</td>

in CSS:

.unter-100 {
background-color: red;
}

Man kann das natürlich auch nachträglich per JavaScript machen, ist aber schon etwas aufwendiger :) die grobe Vorgehensweise wäre:

- alle Tabellenzellen in einer Schleife zu durchlaufen, wie z.B.:

http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript

- in den darin enthaltenen Strings Kommas durch Punkte zu ersetzen
- überprüfen, ob die resultierenden Strings numerisch sind, wie z.B.:

http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric

- falls numerisch, überprüfen, ob der Wert kleiner 100
- falls dies der Fall, die Eigenschaft backgroundColor der jeweiligen Tabellenzelle auf 'red' ändern

Etwas einfacher wäre es mit einem JavaScript-Framework wie jquery :)

3 Cutter

Hallo Jörg

Ich habe die Tabelle nach " <td id="s_p"class="tbody unter-100">74,80</td> "
geändert und es funktioniert einwandfrei.
Nun kommen aber noch mehr Farben ins Spiel.
Kann man in dieser Zeile noch weitere Klassen hinzu fügen?
zB. so " td id="s_p"class="tbody unter-100, über-100, unter-20">74,80</td>"
Würde das funktionieren?

Gruss Cutter

4 Cutter

Hallo Jörg

Ich hab's probiert. Mehrere Klassen anzugeben ist wohl nicht möglich.
Da es sich um mehrere Farben handelt, bleibt wohl nur der Schleifendurchlauf.
Wie die Farben zu verwenden sind werde ich noch genau darstellen.

Bis hierher ersteinmal vielen Dank für alles und noch einen schönen Sonntagabend.

Gruss Cutter

5 Jörg Kruse

Doch das geht schon, es waren ja auch schon zwei Klassen, nämlich "tbody" und "unter-100":

class="tbody unter-100"

Die Klassennamen werden hier durch ein oder mehrere Leerzeichen oder Tabulatoren getrennt, nicht durch Kommata! und Umlaute sind in Klassennamen nicht erlaubt.

6 Cutter

Hallo Jörg

Ich habe noch einmal sehr viel probiert aber ich habe die Klassen nichz zum laufen bekommen.
Ich verstehe da aber was nicht so richtig.

Es ist so:
In dieser Klasse sollen 6 weitere Klassen aufgerufen werden.

class="tbody unter-100 über-100 unter-20 über-20 gleich-0"

Funktionieren tun aber nur "tbody" und die zuletzt aufgeführte "gleich-0".
Ich nehme mal an, dass das an den Klassen selbst liegt. Die Klassen sehen so aus:

.unter-100{
background-color: Farbe;
}

.unter-20{
background-color: Farbe;
}

.ueber-100{
background-color: Farbe;
}

.gleich-0{
background-color: Farbe;
}

.ueber-20{
background-color: Farbe;
}

Die Klassen haben alle den gleichen Inhalt. Welche Farbe soll er den nun nehmen. Denn der Zellen-Wert wird ja nicht überprüft. Er prüft nicht ob der Wert über oder unter 100 ist. Er ruft die Klassen einfach nur auf und die letzte setzt er um.

Frage: Wenn man nun mit der Klasse keine weiteren Klassen direkt aufruft sondern stattdessen eine Funktion zB. so

class="tbody function prüfen()"

wäre das möglich würde das funktionieren?

Dazu die Funktion

function pruefen(){

var elem = document.getElementById("audcad").value;

if (elem < "100"){
elem.classname = "unter-100";
}

if (elem > "100"){
elem.classname = "ueber-100";
}

if (elem < "20"){
elem.classname = "unter-20";
}

if (elem > "20"){
elem.classname = "ueber-20";
}

if (elem = "0"){
elem.classname = "gleich-0";
}

window.setTimeout("pruefen()", 2000);
}
window.setTimeout("pruefen()", 2000);

Könnte das so in der Richtung was werden?

Gruss Cutter

7 Jörg Kruse

class="tbody unter-100 über-100 unter-20 über-20 gleich-0"

Abgesehen von dem ungütligen Umlaut macht diese Ansammlung keinen Sinn. Der Wert kann ja nicht gleichzeitig weniger als und mehr als 100 sein.

Ich dachte, du meintest sowas:

class="tbody unter-100 unter-20"

... also dass z.B. unter 100 die Schrift fett markiert wird, und unter 20 zusätzlich rot eingefärbt

Frage: Wenn man nun mit der Klasse keine weiteren Klassen direkt aufruft sondern stattdessen eine Funktion zB. so

class="tbody function prüfen()"

Nein, sowas geht gar nicht. "prüfen()" ist ein nicht gültiger Klassenname und Klassen dienen wie IDs nur der Identifizierung, um Elemente in CSS oder JavaScript gezielt ansprechen zu können! Meine Frage war ja, wie denn die Tabelle erzeugt wird. Wenn die Tabelle z.B. per PHP generiert würde, dann könnte man dort per Fallunterscheidung gleich auch die passenden Klassen einfügen. Wenn du die Tabelle manuell erzeugst, die passenden Klassen aber nicht manuell einfügen, sondern die Tabellenzellen nachträglich per JavaScript einfärben möchtest, kannst du so vorgehen, wie ich das in Beitrag 2 beschrieben habe.

8 Cutter

Hallo Jörg

Das mit " class="tbody function prüfen()" " war nur so ein Gedanke. Ist erledigt.

Neuer Ansatz:

function schleife(){

// var und elem sollten später wieder raus
var elem = document.getElementById("audcad");
elem.innerHTML = pruefen();
// die Funktion prüfen() soll durch die Schleife aufgerufen werden

//....
//hier soll die schleife rein
//....

window.setTimeout("schleife()", 5000);
}
window.setTimeout("schleife()", 5000);

function pruefen(){

var elem = document.getElementById("audcad");

//hier fehlt etwas. Es soll die Bedingung erfüllt werden die den booleschen Wert WAHR ergibt. Die andere soll ignoriert werden.

if ('elem > 0.00'){
elem.style.backgroundColor = '#00CC00';
}

if ('elem < 0.00'){
elem.style.backgroundColor = '#FF0000';
}
}

MfG Cutter

9 Jörg Kruse

Als erstes würde ich der Tabelle eine ID verpassen, damit man sie leichter ansprechen kann:

<table id="xyz">

Das Script könnte dann folgendermaßen ausschauen:

// prüft, ob Strings numerisch sind
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function einfaerben() {
    // Tabelle, die eingefärbt werden soll:
    var table = document.getElementById("xyz");
    // in äußerer Schleife werden Tabellenreihen durchlaufen:
    for (var i = 0, row; row = table.rows[i]; i++) {
        // in innerer Schleife werden Tabellenzellen durchlaufen:
        for (var j = 0, col; col = row.cells[j]; j++) {
            // Inhalt einer Tabellenzelle:
            var inhalt = col.innerHTML;
            // Kommas in Punkte verwandeln:
            inhalt = inhalt.replace(',', '.');
            // Zelleninhalt numerisch?
            if (isNumeric(inhalt)) {
                var zahl = parseFloat(inhalt);
                if (zahl < 0) {
                    col.style.backgroundColor = '#FF0000';
                } else if (zahl > 0) {
                    col.style.backgroundColor = '#00CC00';
                }
            }
        }
    }
    window.setTimeout("einfaerben()", 5000);
}

window.setTimeout("einfaerben()", 5000);

Die Einzelschritte habe ich in den Kommentaren erklärt :)

10 Cutter

Hallo Jörg

Vielen Dank für deine Hilfe.
Das Script läuft perfekt. Nun kann ich die Tabellen fertig einrichten und vorbereiten für die letzte Hürde, den Datentransfer.

Mit freundlichen Grüssen

Cutter

nach oben

Zellenfarbe ändern

Beitrag schreiben (als Gast)