3

当鼠标悬停时，我试图突出显示扩展数据表的行。这是我的数据表：

<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='#B5F3FB'" onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
                                        selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
                                        style="height:170px; width:484px;">
                    <a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
                              render=":res"/>
                    <f:facet name="header">
                        <h:outputText value="Hesaplarım"/>
                    </f:facet>
                    <rich:column width="120px;">
                        <f:facet name="header">
                            <h:outputText value="Hesap Numarası"/>
                        </f:facet>
                        <h:outputText value="#{accounts.accountNumber}"/>
                    </rich:column>
                    <rich:column width="120px;">
                        <f:facet name="header">
                            <h:outputText value="Para Birimi"/>
                        </f:facet>
                        <h:outputText value="#{accounts.accountCurrency}"/>
                    </rich:column>                        
                </rich:extendedDataTable>

仅当单击行时才会突出显示。然后我尝试了以下javascript代码：

<script type="text/javascript">

$("tr").not(':first').hover(
  function () {
    $(this).css("background","yellow");
  }, 
  function () {
     $(this).css("background","");
  }
);

</script>

但是这次当鼠标悬停时，所有的行都被突出显示。谁能帮我这个？

谢谢

编辑：这次我尝试了那个javascript代码：

<script type="text/javascript">
    $(function() {
        $("tr").not(':first').hover(
                function() {
                    $(this).css("background", "yellow");
                },
                function() {
                    $(this).css("background", "");
                }
        );
    })
</script>

但是，当鼠标位于一行时，每一行都会突出显示。我在这里做错了什么？

编辑2：我也试过这个：

<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='#B5F3FB'" onrowmouseout="this.style.backgroundColor='white'"

这次它起作用了，但是当鼠标位于第 1 列或第 2 列时，前 2 列突出显示，当鼠标位于第 3 列或第 4 列时，第 3 行和第 4 行一起突出显示，我的意思是 1-2 一起突出显示，3-4在一起

这是页面的完整代码：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <div>
        <ui:include src="/template.xhtml" />
    </div>
    <div style="position: relative; top: 120px; left: 300px">
        <h:panelGrid columns="2">

            <h:form>


                <rich:extendedDataTable  value="#{moneyTransferManager.allAccounts}" var="accounts"
                                         selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
                                         style="height:170px; width:484px;">
                    <a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
                              render=":res"/>
                    <f:facet name="header">
                        <h:outputText value="Hesaplarım"/>
                    </f:facet>
                    <rich:column width="120px;">
                        <f:facet name="header">
                            <h:outputText value="Hesap Numarası"/>
                        </f:facet>
                        <h:outputText value="#{accounts.accountNumber}"/>
                    </rich:column>
                    <rich:column width="120px;">
                        `enter code here`<f:facet name="header">
                            <h:outputText value="Para Birimi"/>
                        </f:facet>
                        <h:outputText value="#{accounts.accountCurrency}"/>
                    </rich:column>
                    <rich:column width="120px;">
                        <f:facet name="header">
                            <h:outputText value="IBAN"/>
                        </f:facet>
                        <h:outputText value="#{accounts.iban}"/>
                    </rich:column>
                    <rich:column width="120px;">
                        <f:facet name="header">
                            <h:outputText value="Bakiye"/>
                        </f:facet>
                        <h:outputText value="#{accounts.balance}"/>
                    </rich:column>
                </rich:extendedDataTable>
            </h:form>
            <a4j:outputPanel id="res">
                <rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
                    <rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
                        <h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
                    </rich:list>
                </rich:panel>
            </a4j:outputPanel>



            <rich:panel styleClass="top">
                <div style="position: relative; left: -3px; top: 23px">
                    <h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>  
                </div>
                <h:form>
                    <div style="position: relative; left: 160px; top: -3px">
                        <rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
                            <f:selectItem  itemValue="0" itemLabel="Hesap Hareketlerini Listele" />  
                        </rich:select>    

                    </div>
                    <div style="position: relative; left: 380px; top: -22px">
                        <h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
                    </div>
                </h:form>  
            </rich:panel>



        </h:panelGrid>

    </div>


</h:body>


</html>
4

1 回答 1

2

在我的最终使用onrowmouseover和onrowmouseout工作正常。尝试使用rowClass属性<rich:extendedDataTable>并在样式表中定义规则，如下所示。

.test:hover {
    background-color: yellow; 
}

做

<rich:extendedDataTable  rowClass="test">

记得设置你<h:outputStylesheet>的<h:head>

于 2013-07-16T18:49:06.453 回答