wright67uk Posted December 18, 2012 Share Posted December 18, 2012 I'm trying to get the text, in my table, to change colour based on its value. The code below doesn't seem to work, can anyone see where I'm going wrong or suggest a better idea? <script type="text/javascript"> window.onload = function(){ format(); } function format(){ var vals = document.getElementsByClassName('myValue') for(x in vals){ val = parseInt(vals[x].innerHTML); vals[x].style.color = (val<=20) ? '#0f0' : '#f00'; } } </script> </head> <body> <tr><td class='myValue'>25</td></tr> </body> Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/ Share on other sites More sharing options...
Amplivyn Posted December 18, 2012 Share Posted December 18, 2012 I am guessing you need to have proper HTML table structure, essentially, add <table> and </table> around "<tr><td class="myValue">25</td></tr>" <body> <table> <tr> <td class='myValue'>25</td> </tr> </table> </body> Doing this made the code work and changed the color of 25 to red, good luck! Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400051 Share on other sites More sharing options...
Jessica Posted December 18, 2012 Share Posted December 18, 2012 Honestly, you should probably be using CSS and PHP to do this rather than javascript. Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400125 Share on other sites More sharing options...
codefossa Posted December 18, 2012 Share Posted December 18, 2012 Jessica is right, but to do it in JS is easy. They may not have JS enabled though, so it wouldn't then be shown. Demo: http://xaotique.no-ip.org/tmp/29/ HTML <span class="myClass">10</span> <span class="myClass">13</span> <span class="myClass">45</span> <span class="myClass">26</span> <span class="myClass">18</span> <span class="myClass">5</span> <span class="myClass">142</span> <span class="myClass">16</span> <span class="myClass">96</span> Javascript window.addEventListener("load", function() { var elements = window.document.querySelectorAll(".myClass"); for (var i in elements) { elements[i].style.color = Number(elements[i].innerHTML) >= 20 ? "#00FF00" : "#FF0000"; } }, false); Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400138 Share on other sites More sharing options...
wright67uk Posted December 18, 2012 Author Share Posted December 18, 2012 Hello, and thank you for the suggestions. Thanks for the code example Xaotique Here is my table; http://www.treequoter.com/tabledisplay3.php The only thing, is that when I select page 2 or decide to display 100 results, then only 25 of the entries have been formatted. So how would I do this in php? I'm guessing some sort of if statement after the while loop, but I have never really done anything like this before. Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400162 Share on other sites More sharing options...
Jessica Posted December 18, 2012 Share Posted December 18, 2012 You'd use an if() statement in your PHP. Post the code that constructs the table. Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400163 Share on other sites More sharing options...
codefossa Posted December 18, 2012 Share Posted December 18, 2012 If you were to finish that JS code btw, you would just trigger it to color them when you do your change of data. function colorize() { var elements = window.document.querySelectorAll(".myClass"); for (var i in elements) { elements[i].style.color = Number(elements[i].innerHTML) >= 20 ? "#00FF00" : "#FF0000"; } } window.addEventListener("load", colorize, false); Then call colorize() when you change the data. Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400168 Share on other sites More sharing options...
wright67uk Posted December 19, 2012 Author Share Posted December 19, 2012 Thank you very much to the both of you. I went for the if statement this time. But its great to learn how to do it the js way as well. while($row=mysql_fetch_array($result)) { $fname=$row["fname"]; $lname=$row["lname"]; $club=$row["club"]; $sdate=$row["sdate"]; $yard=$row["yard"]; $year=$row["year"]; if ($yard < 100) { echo "<tr><td>$fname</td><td>$lname</td><td>$club</td><td>$sdate</td><td><span class='red'>$yard</span></td><td>$year</td></tr>"; } else { echo "<tr><td>$fname</td><td>$lname</td><td>$club</td><td>$sdate</td><td><span class='green'>$yard</span></td><td>$year</td></tr>"; }} Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400233 Share on other sites More sharing options...
codefossa Posted December 19, 2012 Share Posted December 19, 2012 It's good to wrap your variables within a string inside {}. Also, a cleaner way to do it would be: $color = $yard < 100 ? "red" : "green"; echo "<tr><td>{$fname}</td><td>{$lname}</td><td>{$club}</td><td>{$sdate}</td><td><span class='{$color}'>{$yard}</span></td><td>{$year}</td></tr>"; Cuts your lines in half. You could also do it by adding on to the string with " . ($yard < 100 ? "red" : "green") . " which would take it down to one line, but I just prefer to not keep making one huge line. Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400236 Share on other sites More sharing options...
wright67uk Posted December 19, 2012 Author Share Posted December 19, 2012 This is great, thankyou! Quote Link to comment https://forums.phpfreaks.com/topic/272125-changing-text-colour-based-on-value/#findComment-1400372 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.