R : Add CSS color coding in a HTML table

Question

I need to export a data.frame to HTML file and color the backgroud of the table cell based a criteria.

Sample data.frame :

Name   Low    High    Value1    Value2    Value3
 Ben    3      10       2         5          8
 Cat    3      10       3         9          4
 Dan    3      10       5         7          6

Desire output is like :

I used below codes to generate the HTML, thank you for the help

HTMLheaderText ="Sample Report"
HTMLfile =HTMLInitFile(outdir     = getwd()
                   , filename = "sample"
                   , extension  = "html"
                   , Title      = "R Output"
                   , CSSFile    = paste(getwd(), "/html_tables.css", sep="")
                   , HTMLframe  = FALSE
                   , useGrid    = FALSE
                   , useLaTeX   = FALSE)

 HTML(HTMLheaderText, file = HTMLfile)
 HTML(dataSet, row.names = FALSE)
 HTMLEndFile()

Answer 1

I found a solution to what I need though this may not be the best way to do it. I added a span in each cell and use jquery to dynamically change the background of the cell.

HTMLheaderText = "Sample Report"

HTMLfile =HTMLInitFile(outdir     = getwd()
                   , filename = "sample"
                   , extension  = "html"
                   , Title      = "R Output"
                   , CSSFile    = paste(getwd(), "/html_tables.css", sep="")
                   , HTMLframe  = FALSE
                   , useGrid    = TRUE
                   , useLaTeX   = FALSE)

HTML('<script src="./jquery-1.7.2.min.js"></script>', file = HTMLfile)

HTML("<script>
  $(document ).ready(function() { 
   $('.dataframe tr).each(function() { 
    var low = $(this).find('td>span.low').text(); 
    var high = $(this).find('td>span.high').text();
    $(this).find('td>span.value').each(function() {
      $(this).css('color', 'white');
      var value= $(this).text(); 
        if (value> low && value< high) {
          $(this).parent().css('background-color', 'green');
        } else {
          $(this).parent().css('background-color', 'red');
        }
         cpk = Number(Math.round(cpk+'e'+4)+'e-'+4);;
         $(this).text(value);
    });

  })
 });
 </script>", file = HTMLfile)

 HTML(HTMLheaderText, file = HTMLfile)
 HTML(dataSet, row.names = FALSE, digit=5)
 HTMLEndFile()