Comment mettre en surbrillance les rangées de données étendues lorsque la souris est terminée dans jsf?

J'essaie de mettre en évidence les lignes du dataté étendu lorsque la souris est terminée. Voici mes données:

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

Celui-ci ne se présente que si la ligne est cliquée. Ensuite, j'ai essayé le code de javascript suivant:

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

Mais cette fois que la souris est terminée, toutes les lignes sont en surbrillance. Est-ce que quelqu'un peut m'aider avec ça?

Merci

Edit: Cette fois, j'ai essayé ce code javascript:

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

Mais toujours, lorsque la souris est sur une ligne, toutes les lignes sont en surbrillance. Qu'est-ce que je fais mal ici?

Edit 2: J'ai également essayé ceci:

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

Cette fois-ci, mais lorsque la souris est sur la 1ère ou la 2ème colonne, les 2 premiers sont en surbrillance et lorsque la souris est sur 3ème ou 4ème colonne, les 3ème et 4ème lignes sont mises en surbrillance, je veux dire 1-2 sont mis en surbrillance ensemble et 3-4 sont ensemble

Voici le code complet de la page:

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

L'utilisation de onrowmouseover et onrowmouseout fonctionna bien à ma fin. Essayez d'utiliser l'attribut rowClass de <rich:extendedDataTable> et définissez une règle dans votre feuille de style comme ça.

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

Et fait

 <rich:extendedDataTable rowClass="test">

N'oubliez pas de définir votre <h:outputStylesheet> dans <h:head>