bms_007 Posted May 9, 2023 Share Posted 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. Link to comment Share on other sites More sharing options...
bms_007 Posted May 9, 2023 Author Share Posted May 9, 2023 (edited) 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? Edited May 9, 2023 by bms_007 Link to comment Share on other sites More sharing options...
bms_007 Posted May 9, 2023 Author Share Posted 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> Link to comment Share on other sites More sharing options...
bms_007 Posted May 9, 2023 Author Share Posted 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><b><span id="val3">...</b></span> </td></tr>Why? what am I missing?BTW it also picks out the <...> but not the id="val3"! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now