javascript - Oracle APEX 根据用户输入格式化单元格

Question

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

我已经在这里四处查看并找到了一些指南，但没有一个是专门针对这个的，这就是为什么我决定问一个新问题。

我要格式化的表格示例:

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

Answer 1

给区域一个静态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);
   };
})

---

编辑:从评论中可以明显看出，您使用的主题以及您所在地区的模板在这些问题上非常重要。
(注意:在下面的示例中，我使用了一个简单的经典报告，该报告基于对具有静态 ID empreport 的 emp 表的选择)
在这种情况下，@Robovisits 使用主题 13 - 经典蓝。首先要检查的是标记:

这使您可以确定选择器是否正确并将定位到正确的元素。验证这一点的最佳方法是从浏览器开发人员工具的控制台运行选择器并检查返回值。
现在当我运行这段代码时:

$("#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 的开发工具中)。

很好，所以我的带有 KING 的单元格确实收到了正确的类。现在为什么它没有变色？
因为我想使用 CSS 着色，所以我需要在 html Pane 中选择受影响的元素，然后我可以检查右侧的 CSS Pane :

如您所见，class1 的 CSS 被覆盖了!这里发生的是另一个更具体的规则优先于我们的规则。直白地说，选择器越具体，它在应用规则时的优先权就越大。这可以通过为我正在使用的选择器提供更多“重量”来解决。

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

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

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