给区域一个静态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 - 经典蓝。首先要检查的是标记:
这使您可以确定选择器是否正确,并将目标正确的元素。验证这一点的最好方法是通过在浏览器的开发人员工具中从控制台运行选择器并检查返回值。
现在,当我运行此代码:
$("#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正在重写!这里发生的是另一个更具体的规则优先于我们的规则。坦率地说,选择器越具体,其应用规则的优先级越高。 这可以通过给我选择更多的“体重”来解决。
body table.t13Standard td.class1{
background-color:yellow;
}
!注:也有使用选项重要只需覆盖任何东西,不管特异性。我通常会避免这种情况,除非它确实有意义。它看起来是这样的:
.class1{
background-color:yellow !important;
}
来源
2013-07-23 14:43:24
Tom
所以这是一个典型的报告,但没有表格的形式? (从截图判断) – Tom
这是正确的@Tom – RoboVisits