In meiner Tabelle steht ja in der ersten Spalte der Name und in der zweiten Spalte die Zeit.
Vergleicht der Befehl cell.innerHTML die zweite Spalte oder wie ? Und ich möchte dann das die ganze Zeile rot eingefärbt wird.
Bei mir ist der Unterschied, das ich in meiner HTML Datei den Tabellenkopf definiere und in der Javascript Datei wird die Tabelle mit Inhalt gefüllt.
Ich weis deshalb nicht wie ich dann die Farbe änder.
ZitatVergleicht der Befehl cell.innerHTML die zweite Spalte oder wie ?
Genau das tut er:
cells[1] ist die zweite Zelle in der Zeile. cells[0] die erste, cells[1] die zweite, cells[2] wäre die dritte.
ZitatUnd ich möchte dann das die ganze Zeile rot eingefärbt wird.
Auch das ist kein Problem:
<script>
function hightlighttime() {
var therows = machinedata.rows;
for (var i = 1; i < therows.length; i++) {
var cell = therows[i].cells[1];
cell.innerHTML = cell.innerHTML - 1; // nur zum Test
if (cell.innerHTML < 5) {
//cell.classList.add("low");
therows[i].style.color = "red"
} else {
therows[i].style.color = "black";
}
}
}
setInterval(hightlighttime, 1000);
</script>ZitatBei mir ist der Unterschied, das ich in meiner HTML Datei den Tabellenkopf definiere und in der Javascript Datei wird die Tabelle mit Inhalt gefüllt.
Ich weis deshalb nicht wie ich dann die Farbe änder.
Auch das ist kein Problem: Das Skript basiert auf dem DOM und nicht auf dem HTML-Text. DOM-Elemente bzw. Tabellenzeilen und -zellen, die Du mit Javascript hinzu fügst, werden genau so berücksichtigt.
ok das hat funktioniert aber wie sieht es damit aus das nicht der text rot wird sonder die ganze Tabellen Zeile
Auch kein Problem, man muss dann nur die Hintergrundfarbe ändern:
<style>
#machinedata {
border-collapse: collapse;
}
</style>
<script>
function hightlighttime() {
var therows = machinedata.rows;
for (var i = 1; i < therows.length; i++) {
var cell = therows[i].cells[1];
cell.innerHTML = cell.innerHTML - 1; // nur zum Test
if (cell.innerHTML < 5) {
//cell.classList.add("low");
therows[i].style.color = "white";
therows[i].style.backgroundColor = "red"
} else {
therows[i].style.color = "black";
therows[i].style.backgroundColor = "white";
}
}
}
setInterval(hightlighttime, 1000);An dieser Stelle offenbaren sich die Vorteile des Verfahrens mit einer Klasse, das ich zuerst gepostet hatte, denn dann muss man nur das CSS ändern.
super hat geklappt danke
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.