0

我有一个 Rich Faces 表，其中包含 div 中的数据。当您将鼠标悬停在 Richtable 行上的特定行上时，我想显示另一个 div，以显示与该记录关联的额外数据，并在使用 jquery 鼠标移出时隐藏一个 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">

4

2 回答 2

0

也许不是最好的解决方案，但您可以尝试使用行索引的 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();">

<a4j:outputPanel id="searchDetails">您可以使用 Firebug找出生成的 id 。

于 2012-11-30T12:52:00.453 回答
0

因此，我使用与 Vladimir 的答案类似的方法解决了这个问题，但我不是用 id 而是用 StyleClass 做的。我添加了 styleClass="detail-#{idx}" 并使用 onmouseover="jQuery('.detail-#{idx}').show();" 进行了搜索。这将使用 div 的样式类搜索元素。每个 div 都有不同的 styleclass，因为有一个行索引与之关联。我希望这将有助于将来的某人。仅供参考：使用 Vladimir 描述的 Id 对我不起作用。

于 2012-12-04T00:21:21.163 回答