Highlight specific cells

by acjackson911

HTML

<table summayray="Overview" class="reporttable">
  <thead>
    <tr>
      <th>Message</th>
      <th>Value1</th>
      <th>Value2</th>
   </tr>
  </thead>
    
  <tbody>
    <tr>
      <td class="message">Foo</td>
      <td class="value1">1</td>
      <td class="value2">24</td>
    </tr>
    
    <tr>
      <td class="message">Bar</td>
      <td class="value1">2</td>
      <td class="value2">150</td>
      
    </tr>
    
    <tr>
      <td class="message">Baz</td>
      <td class="value1">7</td>
      <td class="value2">3</td>
    </tr>
  </tbody>
</table>

CSS

.colorred {
    color: red;
}

JavaScript

$(document).ready(function() {

//    #$('td')   select all td table cells
// for ech vell cell execeute
    //$('td').each(
    //    function () {
            // $(this) refers to the currently seleced td cell
            // html() retrieves the HTML content of the cell
            //debugger;
            
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i<tds.length; i++) {

    // If it currently has the ColumnHeader class...
      if (tds[i].className == "value1") {
          //debugger;
            
            
         //   if ($(this).className == "value1") {

                var cellvalue = tds[i].innerHTML;
                //debugger;
                if (parseInt(cellvalue) < '5') {
                    //debugger;
                    // The wrapInner() function will put the “strong” tags around the cell content.
                    //tds[i].wrapInner('<strong class="colorred"></strong>');
                    tds[i].className = 'colorred'
                    
                }

            }
        }
    //);
});