Question

我有一个Rich Faces表，其中包含div中的数据。当我将鼠标悬停在richtable行上的特定行以显示与该记录关联的额外数据并在使用jquery的mouseout时隐藏div时，我想显示另一个div。我能够使用jquery显示/隐藏div。但问题是它显示/隐藏与每行相关联的每个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">

Answer 1

也许不是最好的解决方案，但你可以尝试使用行索引的jQuery id选择器：

<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();">

您可以使用Firebug找出<a4j:outputPanel id="searchDetails">的结果ID。

Answer 2

所以我使用与弗拉基米尔的答案类似的方式解决了这个问题，但我没有使用Style，而是使用StyleClass。我添加了styleClass =“detail - ＃{idx}”并使用onmouseover =“jQuery（'。detail - ＃{idx}'）进行搜索.show（）;”。这将使用div的样式类搜索元素。每个div都有不同的样式，因为有一个与之关联的行索引。我希望这将有助于将来的某些人。仅供参考：弗拉基米尔所描述的使用Id并不适合我。

在richtable中使用jquery显示/隐藏Div

2 个答案: