JQuery, highlighting table td cells by its value
By admin - Last updated: Monday, April 28, 2008 - Save & Share - Leave a Comment
I was reading at JQuery and come up with a testing script for highlighting score cells according to the values within html table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="../Scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(window).ready(function() { // for each td element under id="score" $("#score td").each(function() { // current td element var td = $(this); // do it once only var val = td.text().replace('%', ''); td.css('background', val > 0 && val <= 60 ? 'yellow' : val > 60 && val <= 80 ? 'red' : val > 80 && val <= 100 ? 'green' : 'black'); }); }); </script> <title>Javascript centric play</title> </head> <body> <table id="score"> <tr> <td>30%</td> <td>65%</td> <td>N/A</td> <td>90%</td> </tr> <tr> <td>85%</td> <td>79%</td> <td>10%</td> <td>N/A</td> </tr> </table> </body> </html>
It will look like,
| 30% | 65% | -10% | 90% |
| 85% | 79% | 10% | N/A |
In conclusion, JQuery provides very easy ways to select DOM elements and perform manipulations on HTML.