R：在 HTML 表格中添加 CSS 颜色编码答案

【问题标题】：R : Add CSS color coding in a HTML tableR：在 HTML 表格中添加 CSS 颜色编码
【发布时间】：2014-05-01 11:55:54
【问题描述】：

我需要将 data.frame 导出到 HTML 文件并根据标准为表格单元格的背景着色。

示例数据帧：

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

愿望输出是这样的：

我使用以下代码生成 HTML，谢谢您的帮助

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()

【问题讨论】：

R, knitr, xtable, alternating row colors的可能重复
Create tables with conditional formatting with RMarkdown + knitr Create tables with conditional formatting with RMarkdown + knitr的可能副本（或至少可能由其回答）
感谢大家的建议，但我正在寻找可以按单元格而不是按行格式化数据的东西。如果建议的链接/功能有能力做到这一点，请指导我。我对 R 很陌生。谢谢。

标签： html r dataframe

【解决方案1】：

我找到了我需要的解决方案，尽管这可能不是最好的方法。我在每个单元格中添加了一个跨度，并使用 jquery 来动态更改单元格的背景。

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()

【讨论】：