texto tabla llenar example etiqueta ejemplo cuadro con javascript jsf datatable richfaces

javascript - tabla - h panelgrid ejemplo



¿Cómo resaltar las filas de datatable extendido cuando el mouse está terminado en jsf? (1)

El uso de onrowmouseover y onrowmouseout funcionó bien en mi extremo. Intente utilizar el atributo rowClass de <rich:extendedDataTable> y defina una regla en su hoja de estilos de ese modo.

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

Y hacer

<rich:extendedDataTable rowClass="test">

Recuerde configurar su <h:outputStylesheet> en <h:head>

Estoy tratando de resaltar las filas de la tabla de datos extendida cuando el mouse está terminado. Aquí está mi tabla de datos:

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

Esta solo se destaca si se hace clic en la fila. Luego probé el siguiente código de JavaScript:

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

Pero esta vez cuando el mouse termina, todas las filas se resaltan. Puede alguien ayudarme con esto?

Gracias

Editar: Esta vez probé ese código javascript:

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

Pero aún así, cuando el mouse está en una fila, cada fila se resalta. ¿Qué estoy haciendo mal aquí?

Edición 2: También intenté esto:

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

esta vez funciona, pero cuando el mouse está en la primera o segunda columna, los primeros 2 se resaltan y cuando el mouse está en la 3ª o 4ª columna, la 3ª y 4ª filas se resaltan juntas, quiero decir 1-2 se resaltan juntas y 3-4 están juntos

Aquí está el código completo de la página:

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