Let table cell/column change color depending on the changing text in the cell
Question
Good afternooon,
I am trying to change the color of a cell/column depending on the text in the cells of class stat of a table.
With an arduino I collect data from a few devices and export this data via an xml file to a web page. This works well.
But now I would like to give the cells stat a different color depending on the status of the device. I've found several examples here on the forum but none of them seem to work.
This is my code: `
<script>
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
// extract XML data from XML file
var count;
// get status
var num_an = this.responseXML.getElementsByTagName('stat').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("stat")[count].innerHTML =
this.responseXML.getElementsByTagName('stat')[count].childNodes[0].nodeValue;
}
// get temperatuur
var num_an = this.responseXML.getElementsByTagName('temp').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("temp")[count].innerHTML =
this.responseXML.getElementsByTagName('temp')[count].childNodes[0].nodeValue;
}
// get tijd
var num_an = this.responseXML.getElementsByTagName('tijd').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("tijd")[count].innerHTML =
this.responseXML.getElementsByTagName('tijd')[count].childNodes[0].nodeValue;
}
// get eenheid
var num_an = this.responseXML.getElementsByTagName('eenheid').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("eenheid")[count].innerHTML =
this.responseXML.getElementsByTagName('eenheid')[count].childNodes[0].nodeValue;
}
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
}
</script>
<body onload="GetArduinoInputs()" style="background-color:#FEF7A2;">
<h1 style="font-size:55px;">Monitor</h1>
<table id="table_id">
<tr>
<th>Div 1</th>
<th>Div 2</th>
<th>Div 3</th>
<th>Div 4</th>
<th>Div 5</th>
<th>Div 6</th>
</tr>
<tr>
<td class="stat">...</td>
<td><span class="stat">...</span></td>
<td><span class="stat">...</span></td>
<td><span class="stat">...</span></td>
<td><span class="stat">...</span></td>
<td><span class="stat">...</span></td>
</tr>
<tr>
<td><span class="temp">...</span>°C</td>
<td><span class="temp">...</span>°C</td>
<td><span class="temp">...</span>°C</td>
<td><span class="temp">...</span>°C</td>
<td><span class="temp">...</span>°C</td>
<td><span class="temp">...</span>°C</td>
</tr>
<tr>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
<td><span class="tijd">...</span><span class="eenheid">...</span></td>
</tr>
</table>
</body>
`
only with this did I get the cells discolored when I opened the page on the PC and filled in the different texts at the place of the dots. but this no longer worked when the data came from the xml. `
$(document).ready(function(){
$('#table_id td.stat').each(function(){
if ($(this).text() == 'Klaar') {
$(this).css('background-color','#32CD32');
} else if ($(this).text() == 'Aan') {
$(this).css('background-color','#FED129');
} else if ($(this).text() == 'Uit') {
$(this).css('background-color','#FEAD29');
} else if ($(this).text() == 'ERROR') {
$(this).css('background-color','#FF4500');
}
});
});
` Is there someone who can help me?
1 answers
solution1
0 2022-12-29 13:25:58
Rather than letting the color depend on the text inside an element (which may be language-dependent in a multi-language system), I suggest to let both text and color depend on a (language-independent) code and express this dependency through CSS.
CSS will automatically update both text and color whenever the code changes.
html[lang|=nl] span.stat[code='0']::after { content: "Klaar"; background-color: #32CD32; } html[lang|=nl] span.stat[code='1']::after { content: "Aan"; background-color: #FED129; } html[lang|=nl] span.stat[code='2']::after { content: "Uit"; background-color: #FEAD29; } html[lang|=nl] span.stat[code='3']::after { content: "ERROR"; background-color: #FF4500; }
<html lang="nl"> <span class="stat" code="0"></span> <button onclick="this.previousElementSibling.setAttribute('code',3)">Turn off</button><br> <span class="stat" code="1"></span><br> <span class="stat" code="2"></span><br> <span class="stat" code="3"></span> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.