Css h:dataTable在提交后丢失选定的行styleClass

在我的数据表中，当单击一行时，它会被标记为某种颜色。但是这个标记消失了，因为提交发生了。但是我只重新呈现页面的其他部分，而不是表，那么为什么会出现这种情况呢？我怎样才能解决这个问题？ 守则：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:p="http://primefaces.prime.com.tr/ui"
  template="/templates/mainLayout.xhtml">

<ui:define name="header">
    <h1>Persons List</h1>
</ui:define>

<ui:define name="content">
    <h:form id="mainForm">
        <h:outputStylesheet name="tableStyle.css" library="css" target="body"/>

        <h:panelGroup id="personPanel">
            <h:outputText value="#{msgs.fName}"/>
            <h:inputText value="#{personController.person.firstName}" maxlength="20"/>

            <h:outputText value="#{msgs.lName}"/>
            <h:inputText value="#{personController.person.lastName}" maxlength="20"/>

            <h:outputText value="#{msgs.phone}"/>
            <h:inputText value="#{personController.person.phone}" maxlength="20"/>
        </h:panelGroup>

        <h:commandButton value="#{msgs.save}" >
          <f:ajax execute="@form" render="personsTable personPanel" listener="#{personController.savePerson}"/>
        </h:commandButton>
        <h:dataTable id="personsTable" value="#{personController.persons}" var="bean" 
            styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" >
            <h:column>
                <f:facet name="header">
                    <h:outputText value="First Name" />
                </f:facet>
                <h:commandLink value="#{bean.firstName}" >
                    <f:ajax execute="@this" render="personPanel" >
                        <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
                    </f:ajax>
                </h:commandLink>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Last Name" />
                </f:facet>
                <h:commandLink value="#{bean.lastName}" >
                    <f:ajax execute="@this" render="personPanel">
                        <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
                    </f:ajax>
                </h:commandLink>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Phone" />
                </f:facet>
                <h:commandLink value="#{bean.phone}" >
                    <!-- f:ajax execute="@this" render="personPanel">
                        <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
                    </f:ajax-->
                </h:commandLink>
            </h:column>
        </h:dataTable>
    </h:form>
</ui:define>

<ui:define name="footer">
    <script type="text/javascript">
        $(document).ready(function(){
            $(".order-table tr").mouseover(function(){
                $(this).addClass("over");
            });
            $(".order-table tr").mouseout(function(){
                $(this).removeClass("over");
            });
            $(".order-table tr").click(function(){
                $(".order-table tr").removeClass("choose");
                $(this).addClass("choose");
            });
        });
    </script>
</ui:define>
</ui:composition>

人员名单
$（文档）.ready（函数（）{
$（“.order table tr”）.mouseover（函数（）{
$（此）.addClass（“超过”）；
});
$（“.order table tr”）.mouseout（函数（）{
$（此）.removeClass（“结束”）；
});
$（“.order table tr”）。单击（函数（）{
$（“.order table tr”）.removeClass（“choose”）；
$（this.addClass（“选择”）；
});
});

您可以使用firefox和“firebug”插件实时检查元素以了解发生了什么。可能是你的更新打破了风格的继承性…

你可以使用firefox和“firebug”插件实时检查元素，以了解发生了什么。可能是你的更新打破了风格的继承性