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.




Posted in Javascript • Tags: , Top Of Page

Write a comment


Captcha: 9 − three =