Javascript Oracle APEX根据用户输入设置单元格格式

Javascript Oracle APEX根据用户输入设置单元格格式,javascript,css,oracle-apex,Javascript,Css,Oracle Apex,我目前正在协助创建一个Oracle APEX应用程序,我的任务是能够“使”表格中的单元格根据用户输入自动更新单元格背景。 例如: 如果用户输入AL(年假),则会将背景设置为Yello 如果用户输入X,则将单元格背景设置为灰色。 如果用户输入C(培训课程),则将其格式化为“peach” 我已经在这里环顾了一下,找到了一些指南,但没有一个是专门针对这个的,这就是为什么我决定问一个新问题 我想格式化的表格示例: 我被告知这可以用javascript实现,我对javascript有一定的了解。 我想知

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

我已经在这里环顾了一下,找到了一些指南,但没有一个是专门针对这个的,这就是为什么我决定问一个新问题

我想格式化的表格示例:

我被告知这可以用javascript实现,我对javascript有一定的了解。 我想知道这是否可以在CSS中完成?
因为HTML是不可能的。

给区域一个静态ID。 将这些样式规则放在某个位置,例如页面标题:

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

编辑:从评论中可以明显看出,您使用的主题以及您所在地区的模板在这些问题上非常重要。
(注意:在下面的示例中,我使用的是一个简单的经典报告,该报告基于emp表上的select,带有静态id empreport)
在本例中,@robovisis使用的是主题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窗格中选择受影响的元素,然后我可以签入右侧的CSS窗格:

如您所见,class1的CSS正在被覆盖!这里发生的事情是,另一个更具体的规则优先于我们的规则。坦率地说,选择器越具体,它在应用规则时的优先级就越高。 这可以通过给选择器更多的“权重”来解决

注意:还有一个选项可以使用!重要的是要简单地覆盖任何内容,无论其特殊性如何。我通常避免这样做,除非它真的有意义。它可能是这样的:

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

所以它是一个经典的报告,而不是表格形式?(从截图判断)你能稍微扩展一下吗?例如,您是否偶然得到任何javascript错误?您是否为其中一个“应受影响”单元格添加了html,并在其中添加了正确的类?(表示css未被正确覆盖)您是否为报表提供了静态id?(这可能是一个与主题相关的问题)我有一种感觉,它可能与主题有关,因为我添加它时没有出错,但没有任何更改。我目前使用的是经典的Blue Theme,我只能建议您快速检查一下html。当javascript运行时(我认为是加载或刷新后),检查应该受到影响的单元格之一,例如其中包含AL的单元格。单元格中是否添加了类?如果是这样,那么它可能与css覆盖有关。您还可以使用适当的工具进行检查(例如firefox中的firebug,chrome中的developer tools,检查styles标签并查看样式是否有覆盖)。我希望它更清晰,但是使用css和javascript需要这些东西来检查它们如何工作以及是否工作。在我使用的报告中,我给了它一个静态ID:和javascript:&也为迟来的答复道歉,我自己一直在问:-)@TomWh…发生了什么事!?奇怪!不过你是对的。该死-在区域级别上,ID设置为
TestReport
。但是,当您查看先前发布的
CSS.PNG
图像时,您可以看到报表容器具有
report#TestReport#
!您需要1)转到报告属性并注意报告模板(而不是区域!),2)转到模板并检查该报告模板。在“行之前”中,您可以看到静态id构造:
id=“report_35;#REGION_static_35;id”
。我希望这是一个自定义模板的问题。。。我这么晚才问这个问题有什么愚蠢的:你在玩什么apex版本?
body table.t13Standard td.class1{
background-color:yellow;
}
.class1{
background-color:yellow !important;
}