Dynamic Cell colour change dependent on table cell value

bms_007 · May 9, 2023

Hi all,
I'm hoping that someone here can help me.
I am attempting to dynamically change cell colours depending on call content.
Please see post here:https://forum.arduino.cc/t/html-dynamic-cell-colour-change-dependent-on-table-cell-value/1123814/3
as all code and steps taken are clearly documented.
I'm no HTML expert and have no idea what's wrong!
Any help would be very much appreciated.
Thanks in advance.

bms_007 · May 9, 2023

So It Seems that any data displayed in the table using this method :
<tr><td>Error</td> <td>...
ie using id="val3" is ignored using this script:-

<script>
		var t = document.getElementById('c2-info');
			if(t) {
					Array.from(t.rows).forEach((td, rowIdx) => {
					Array.from(td.cells).forEach((cell, cellIdx) => {
					if (cell.innerText == '') {
						cell.style.backgroundColor = 'Tomato';
					}else if (cell.innerText == 'CLOSED') {
						cell.style.backgroundColor = 'Tomato';
					}else if (cell.innerText == 'ALARM') {
						cell.style.backgroundColor = 'Red';
					}else if (cell.innerText == 'Error') {
						cell.style.backgroundColor = 'MediumSeaGreen';
					}else if (cell.innerText == 'Error 1') {
						cell.style.backgroundColor = 'Green';
					}
				});
			});
		}
</script

whilst it displays the correct text. WHY?

Edited May 9, 2023 by bms_007

bms_007 · May 9, 2023

Okay so I will attempt to publish everything here.
code on SD card :-


<html>
<head>
<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) {
						
							document.getElementById("val0").innerHTML =
                                this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;										
							document.getElementById("val1").innerHTML =
                                this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
                                
							document.getElementById("val2").innerHTML =
                                this.responseXML.getElementsByTagName('analog')[2].childNodes[0].nodeValue;
                                
							document.getElementById("val3").innerHTML =
                                this.responseXML.getElementsByTagName('analog')[3].childNodes[0].nodeValue;
                        }
                    }
                }
            }
            request.open("GET", "ajax_inputs" + nocache, true);
            request.send(null);
            setTimeout('GetArduinoInputs()', 400);
        }

</script>
<style type="text/css">
  
.cust2 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 500px;}
.cust2 td, .cust2 th {
  border: 1px solid #ddd;
  padding: 5px;}
.cust2 tr:nth-child(even){background-color: #f2f2f2;}
.cust2 th {
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: left;
  background-color: LightSalmon;
  color: white;}
	
</style>
</head>

<body onload="GetArduinoInputs()">
    	
	<table class="cust2">
	<br />
    <th>Relays Alarm Errors</th>
    <th>State</th>
  	<tr><td>Relay 1</td>
    <td><b><span id="val0">...</b></span>
	</td></tr>
	<tr><td>Relay 2</td>
    <td><b><span id="val1">...</b></span>
	</td></tr>
	<tr><td>Alarm</td>
    <td><b><span id="val2">...</b></span>
	</td></tr>
	<tr><td>Error</td>
    <td><b><span id="val3">...</b></span>
	</td></tr>
	</table>

bms_007 · May 9, 2023

Now I add this to change cell colours dependent on cell value:-

<table id="c2-info"; class="cust2";>
      <br />
      <th>Relays Alarm Errors</th>
      <th>State</th>
      <tbody>
  	<tr><td>Relay 1</td>
        <td><b><span id="val0">...</b></span>
	</td></tr>
	<tr><td>Relay 2</td>
        <td><b><span id="val1">...</b></span>
	</td></tr>
	<tr><td>Alarm</td>
        <td><b><span id="val2">...</b></span>
	</td></tr>
	<tr><td>Error</td>
        <td><b><span id="val3">...</b></span>
	</td></tr></tbody>
</table>
<script>
		var t = document.getElementById('c2-info');
			if(t) {
					Array.from(t.rows).forEach((td, rowIdx) => {
					Array.from(td.cells).forEach((cell, cellIdx) => {
					if (cell.innerText == '') {
						cell.style.backgroundColor = 'Tomato';
					}else if (cell.innerText == 'CLOSED') {
						cell.style.backgroundColor = 'Tomato';
					}else if (cell.innerText == 'ALARM') {
						cell.style.backgroundColor = 'Red';
					}else if (cell.innerText == 'Error') {
						cell.style.backgroundColor = 'MediumSeaGreen';
					}else if (cell.innerText == 'Error 1') {
						cell.style.backgroundColor = 'Green';
					}
				});
			});
		}
</script

It will pick out all <tr><td>Error</td> in this part and behave as expected.
but ignores these <td>... </td></tr>
Why? what am I missing?
BTW it also picks out the <...> but not the id="val3"!

Sign In

Dynamic Cell colour change dependent on table cell value

Recommended Posts

bms_007

Link to comment

Share on other sites

bms_007

Link to comment

Share on other sites

bms_007

Link to comment

Share on other sites

bms_007

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity