JSF2 中的 h:dataTable 交替行答案

【问题标题】：h:dataTable alternating rows in JSF2JSF2 中的 h:dataTable 交替行
【发布时间】：2011-06-09 02:56:21
【问题描述】：

我正在尝试在 JSF2 h:dataTable 中创建交替行（没有 Richfaces 等），但我得到了意想不到的结果。该表已构建，但显示了一个白色网格（但我没有指定任何边框），并且每行下方没有底线。

CSS：

.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>

结果是（注意我不知道从哪里来的白色网格。也没有应该来自 CSS 的下划线）：

http://imagebin.org/132574

【问题讨论】：

标签： jquery css jsf-2

【解决方案1】：

最后我找到了难以捉摸的答案：我缺少的是：表声明中的 rules="none" 。这个缺失的声明弄乱了我的 CSS 并部分忽略了它。现在 CSS 可以正常工作了。

【讨论】：