Jquery h:JSF2中的数据表交替行
我试图在JSF2H:dataTable中交替生成行(没有richfaces之类的),但得到了一个意外的结果。表是构建的,但它显示了一个白色网格(但我没有指定任何边框),并且每行下没有按钮线 CSS:Jquery h:JSF2中的数据表交替行,jquery,css,jsf-2,Jquery,Css,Jsf 2,我试图在JSF2H:dataTable中交替生成行(没有richfaces之类的),但得到了一个意外的结果。表是构建的,但它显示了一个白色网格(但我没有指定任何边框),并且每行下没有按钮线 CSS: .order-table{ border-collapse:collapse; } .order-table-header{ text-align:center; background:none repeat scroll 0 0 #E5E5E5; border-bottom:1px
.order-table{
border-collapse:collapse;
}
.order-table-header{
text-align:center;
background:none repeat scroll 0 0 #E5E5E5;
border-bottom:1px solid #95bce2;
padding:16px;
}
.order-table-odd-row{
text-align:center;
background:none repeat scroll 0 0 #FFFFFFF;
border-top:1px solid #000000;
}
.order-table-even-row{
text-align:center;
background:none repeat scroll 0 0 #ecf6fc;
border-top:1px solid #BBBBBB;
}
table.order-table tr.over {
background-color: #bcd4ec;
}
下表:
<h:dataTable id="personsTable" value="#{personController.allPersons}" var="bean"
styleClass="order-table" headerClass="order-table-header"
rowClasses="order-table-odd-row,order-table-even-row">
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:outputText value="#{bean.firstName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:outputText value="#{bean.lastName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:outputText value="#{bean.phone}"/>
</h:column>
</h:dataTable>
还有一个小JQuery脚本:
<script type="text/javascript">
$(document).ready(function(){
$(".order-table tr").mouseover(function(){
$(this).addClass("over");
});
$(".order-table tr").mouseout(function(){
$(this).removeClass("over");
});
});
</script>
$(文档).ready(函数(){
$(“.order table tr”).mouseover(函数(){
$(此).addClass(“超过”);
});
$(“.order table tr”).mouseout(函数(){
$(此).removeClass(“结束”);
});
});
结果是(注意来自我不知道哪里的白色网格,也没有来自CSS的下划线):
我终于找到了一个难以捉摸的答案: 我缺少的是:表声明中的rules=“none”。 这个缺失的声明弄乱了我的CSS并部分忽略了它。 现在CSS完全可以工作了