简体   繁体   English

h:dataTable在JSF2中交替行

[英]h:dataTable alternating rows in JSF2

I'm trying to make alternating rows in JSF2 h:dataTable (no richfaces or such) but i get an unexpected result. 我正在尝试在JSF2 h:dataTable中进行交替的行(没有richfaces等),但得到了意外的结果。 the table is built but it has a white grid shown (but i didn't specifiy any border) and there's no buttom line under each row. 该表已建立,但显示为白色网格(但我未指定任何边框),并且每行下方均没有buttom线。

The CSS: 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;
}

The table: 桌子:

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

and a small JQuery script: 和一个小的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>

The result is (notice the white grid that came from i don't know where. And also no underline which should come from the CSS): 结果是(请注意,来自白色网格我不知道在哪里。也没有来自CSS的下划线):

http://imagebin.org/132574 http://imagebin.org/132574

Finally i found the elusive answer: What i was missing is: rules="none" in the table declaration. 最后,我找到了一个难以捉摸的答案:我所缺少的是:表声明中的rules =“ none”。 This missing declaration managed to mess up my CSS and to partially ignore it. 这个缺少的声明设法弄乱了我的CSS,并部分忽略了它。 Now the CSS is working fully. 现在CSS可以正常工作了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM