Показать / скрыть Div с помощью jquery внутри richtable

У меня есть таблица Rich Faces, в которой есть данные, содержащиеся в div. Я хочу показать другой div, когда вы наводите указатель мыши на определенную строку в строке richtable, чтобы показать дополнительные данные, связанные с этой записью, и скрыть div при наведении курсора с помощью jquery. Я могу показать / скрыть div с помощью jquery. Но проблема в том, что он показывает / скрывает каждый тег div, связанный с каждой строкой, вместо отображения / скрытия div конкретной строки. Как убедиться, что только строка, на которую я наведен, показывает только связанный с ней тег div?

Вот фрагмент кода:

<s:div style="float:left; ">
  <rich:dataTable id="pendingOptyTbl" value="#{searchResultList}"
    var="item" style="border: none; float: left;width:100%;">  
      <rich:column style="border: none;">
          <s:div style="position:relative;height: 35px;">
            <s:div style="float:left; width: 700px; " >
               <a4j:outputPanel style="width: 700px;" onmouseout="jQuery('accountDetails').hide();"   onmouseover="jQuery('.accountDetails').show();">
                    <s:div>
                           <h:outputText value="#{searchController.getCapitalizeName(item.label)} : " >
                    </s:div>
               </a4j:outputPanel>
            </s:div>
        <s:div  style="float:left;top:-10px;right:80px; width:360px;position:absolute;" styleClass="searchDetailsClass">
                <a4j:outputPanel id="searchDetails" ajaxRendered="true" styleClass="accountDetails">


jquery jsf xhtml richfaces
person user1555524    schedule 29.11.2012    source источник
comment
Я пробовал сделать так ... livedemo.exadel.com/richfaces-demo/ richfaces / jQuery.jsf ... но, похоже, не работает ... любая помощь приветствуется ...   -  person user1555524    schedule 30.11.2012

Ответы (2)


arrow_upward
0
arrow_downward

Возможно, это не лучшее решение, но вы можете попробовать селектор идентификаторов jQuery с индексом строки:

<h:form id="form">
    <rich:dataTable id="table" rowKeyVar="idx" ...>
        <rich:column>
        ...
            <a4j:outputPanel onmouseover="jQuery('#form\\:table\\:#{idx}\\:searchDetails').show();"
                onmouseout="jQuery('#form\\:table\\:#{idx}\\:searchDetails').hide();">

Вы можете узнать результирующий идентификатор <a4j:outputPanel id="searchDetails"> с помощью Firebug.

person Vladimir M.    schedule 30.11.2012

arrow_upward
0
arrow_downward

Поэтому я решил это, используя способ, аналогичный ответу Владимира, но вместо id я сделал это с помощью StyleClass. Я добавил styleClass = "detail - # {idx}" и провел поиск с помощью onmouseover = "jQuery ('. Detail - # {idx}'). Show ();". Это будет искать элемент, используя класс стиля div. У каждого div будет свой класс стилей, поскольку с ним связан индекс строки. Надеюсь, это кому-то поможет в будущем. К вашему сведению: использование Id, как описано Владимиром, у меня не сработало.

person user1555524    schedule 04.12.2012