2013-07-22 101 views
1

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

我已经在这里看过,发现了一些指南,但没有一个是专门为此,这就是为什么我决定问一个新的题。表

样,我想格式化: Example

有人告诉我,这可以在JavaScript中完成,这我有一定的了解 我在想,如果这个可以做到。 CSS? 由于HTML不可能。

+0

所以这是一个典型的报告,但没有表格的形式? (从截图判断) – Tom

+0

这是正确的@Tom – RoboVisits

回答

2

给区域一个静态ID。 把这些样式规则的地方,例如页面标题:

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

运行这个JavaScript,但对你的报告的静态ID替换STATICID。根据需要添加案例和类。这里的优点是你从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表上的select)
在这种情况下@Robovisits使用的是主题13 - 经典蓝。首先要检查的是标记:
screenshot of html snippet concerning report in theme 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的开发工具是)。
affected element in html pane
不错,所以我在KING中的小区确实收到了正确的课。现在它为什么不着色?
因为我想用CSS着色,我需要选择在html窗格中受影响的元素,然后我可以在CSS面板中查询到正确的:
css pane overview before override
正如你所看到的,类class1的CSS正在重写!这里发生的是另一个更具体的规则优先于我们的规则。坦率地说,选择器越具体,其应用规则的优先级越高。 这可以通过给我选择更多的“体重”来解决。

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

css pane after override

!注:也有使用选项重要只需覆盖任何东西,不管特异性。我通常会避免这种情况,除非它确实有意义。它看起来是这样的:

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

colours!

+0

似乎没有为我工作:-(@Tom – RoboVisits

+0

你可以扩大一点吗?例如,你是否偶然得到任何javascript错误?你是否改为html对于其中一个应该受到影响的单元格,您是否看到正确的类添加了?(表示css没有被正确覆盖)您是否给报告一个静态ID?(这可能是一个与主题相关的问题) – Tom

+0

I有一种感觉,它可能与主题,因为我没有错误添加它,但没有任何改变。我目前使用经典蓝色主题 – RoboVisits

相关问题