✔ Textfarbe per Javascript ändern

M

Mojo58

Grünschnabel
Hallo,

ich habe in einer tabelle eine zelle, in dem entweder das wort JA oder NEIN drin steht. jetzt möchte ich per javascript auf dieses element zugreifen, und abhängig vom text den text selbst entweder grün oder rot einfärben.

wie ließe sich sowas möglichst einfach realisieren?

gruß
 
Hi,

wann immer sich der Inhalt ändert, sollte eine JS-Funktion aufgerufen werden, die folgendes leistet:
  • Alle Zellen (mit ID versehen) durchlaufen und falls innerHTML == "JA" style.color = '#0F0';
    sonst bei "NEIN" style.color = '#F00';

In etwa so:
Javascript: 
function updateCell(id) {
    cell = document.getElementById(id);
    if(cell.innerHTML == "JA"){
        cell.style.color = '0F0';
    }
    else if(cell.innerHTML == "NEIN"){
        cell.style.color = 'F00';
    }
}

und

HTML: 
<td id="1" onload="updateCell(this.id);">
JA
<td>

(ungetestet!)

javaDeveloper2011
 
Zuletzt bearbeitet von einem Moderator:
vielen dank für deinen ansatz. hmm... ich hab das mal in ne testdatei gepackt. leider scheints nicht zu funktionieren. entweder hab ich was übersehen, oder es fehlt etwas:

HTML: 
<html>
<head>
<title>Test</title>

<script language="javascript">
function updateCell(id) {
    cell = document.getElementById(id);
    if(cell.innerHTML == "JA"){
        cell.style.color = '0F0';
    }
    else if(cell.innerHTML == "NEIN"){
        cell.style.color = 'F00';
    }
}</script>

</head>
<body>
<table>
<tr>

<td id="1" onload="updateCell(this.id);">JA</td>

</tr>
</table>
</body>
</html>
 
Hi,

ich muss meinen Code echt IMMER testen...
sorry für die Fehler!
  • Farb-Werte beginnern immer mit #
  • tds haben niemals onload-Attribute
  • getElementsByTagName() erspart einem das setzen der ids

Hier mal ein funktionierender Code:
HTML: 
<html>

<head>
	<title>Test</title>
	<script type="text/javascript">
		function updateCells() {
			var cells = document.getElementsByTagName("td");
			for(var i=0; i<cells.length; i++){
				if(cells[i].innerHTML == "JA"){
					cells[i].style.color = '#0F0';
				}
				else if(cells[i].innerHTML == "NEIN"){
					cells[i].style.color = '#F00';
				}
			}
		}
	</script>
</head>

<body onload="updateCells();">
	<table>
		<tr>
			<td>JA</td>
			<td>NEIN</td>
			<td>JA</td>
		</tr>
	</table>
</body>

</html>

Was immer noch Probleme machen könnte...
...JA/NEIN muss immer komplett groß geschrieben werden
...die Funktion wird immer genau 1 mal beim laden des Dokuments ausgeführt
...alle <td>s des Dokuments werden überprüft und evetuell eingefärbt

Hoffe das passt so,
javaDeveloper2011
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück