Jump to content

bms_007

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by bms_007

    Dynamic Cell colour change dependent on table cell value

    in HTML/XHTML

    Posted

    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><b><span id="val3">...</b></span> </td></tr>
    Why? what am I missing?
    BTW it also picks out the <...> but not the id="val3"!

    Dynamic Cell colour change dependent on table cell value

    in HTML/XHTML

    Posted

    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>

     

    Dynamic Cell colour change dependent on table cell value

    in HTML/XHTML

    Posted · Edited by bms_007

    So It Seems that any data displayed in the table using this method :
    <tr><td>Error</td> <td><b><span id="val3">...</b></span>
    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?

    Dynamic Cell colour change dependent on table cell value

    in HTML/XHTML

    Posted

    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.

×
×
  • Create New...