1

我目前正在协助创建 Oracle APEX 应用程序，我的任务是能够“使”表格中的单元格根据用户输入自动更新单元格背景。例如：如果用户输入 AL（年假），那么这会将背景格式化为 Yello 如果用户输入 X，它将将单元格背景格式化为灰色。如果用户输入 C（培训课程），它会将其格式化为“桃子”

我已经在这里环顾四周，找到了一些指南，但没有一个专门针对这一点，这就是为什么我决定提出一个新问题。

我要格式化的表格示例： 例子

有人告诉我这可以用 javascript 完成，我对此有所了解。我想知道这是否可以用 CSS 完成？因为 HTML 是不可能的。

4

1 回答 1

2

给区域一个静态 ID。将这些样式规则放在某处，例如页面标题：

<style>
.annual{
background-color:yellow;
}
.ex{
background-color:grey;
}
.trainingcourse{
background-color:peach;
}
</style>

运行此 javascript，但将 STATICID 替换为报告的静态 ID。在需要的地方添加案例和类。这里的优点是您可以从 CSS 中引导外观，而不是使用 jquery。如果您愿意，您可以立即分配背景颜色，但我自己的偏好是保持分开。

$("#report_STATICID td[headers]").each(function(){
   var lTest = $(this).text(), lClass;
   switch(lTest){
      case 'AL':
         lClass = "annual";
         break;
      case 'X':
         lClass = "ex";
         break;
      case 'C':
         lClass = "trainingcourse";
         break;
   };
   if(lClass){
      $(this).addClass(lClass);
   };
})

编辑：从评论中可以看出，您使用的主题以及您所在地区的模板在这些问题上非常重要。
（注意：在下面的示例中，我使用了一个简单的经典报告，该报告基于 emp 表上的选择，具有静态 id empreport）
在这种情况下，@Robovisits 使用的是 Theme 13 - Classic Blue。首先要检查的是标记：
关于主题 13 中报告的 html 片段的屏幕截图
这使您可以确定选择器是否正确，并将针对正确的元素。验证这一点的最佳方法是在浏览器的开发人员工具中从控制台运行选择器并检查返回值。
现在当我运行这段代码时： 

$("#report_empreport td[headers]").each(function(){
   var lTest = $(this).text(), lClass;
   switch(lTest){
      case 'KING':
         lClass = "class1";
         break;
      case 'PICARD':
         lClass = "class2";
         break;
      case 'FRANCINE':
         lClass = "class3";
         break;
   };
   if(lClass){
      $(this).addClass(lClass);
   };
})

然后我右键单击我认为应该受此影响的列并选择检查元素（在这种情况下，我在 Chrome 的开发工具中）。
html 窗格中受影响的元素
很好，所以我的带 KING 的牢房确实上了正确的课。现在为什么不上色？
由于我想使用 CSS 着色，我需要在 html 窗格中选择受影响的元素，然后我可以在右侧的 CSS 窗格中进行检查：
覆盖前的 CSS 窗格概述
如您所见，class1 的 CSS 被覆盖！这里发生的是另一个更具体的规则优先于我们的规则。坦率地说，选择器越具体，它在应用规则时的优先权就越大。这可以通过给我使用更多“权重”的选择器来解决。 

body table.t13Standard td.class1{
background-color:yellow;
}

覆盖后的CSS窗格

注意：也可以选择使用 !important 来简单地覆盖任何内容，无论具体如何。我通常会避免这种情况，除非它确实有意义。它可能看起来像这样：

.class1{
background-color:yellow !important;
}

颜色！

于 2013-07-23T14:43:24.207 回答