如何在鼠标悬停

Question

显示输入字段我有我用来显示数据和编辑数据这个JSF表：

<table> 
    <ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}"> 

     <tr> 
      <td>Datacenter Type</td> 
      <td> 
       <h:outputText value="#{ud.type}" 
           rendered="#{not DCProfileTabGeneralController.editable}" /> 
       <h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" /> 
      </td>          
     </tr> 
     <tr> 
      <td>Date Added</td> 
      <td> 
       <h:outputText value="#{ud.dateAdded}" 
           rendered="#{not DCProfileTabGeneralController.editable}" /> 
       <h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" /> 
      </td>          
     </tr> 
     <tr> 
      <td>Hour Added</td> 
      <td> 
       <h:outputText value="#{ud.hourAdded}" 
           rendered="#{not DCProfileTabGeneralController.editable}" /> 
       <h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" /> 
      </td>          
     </tr> 
     <tr> 
      <td>Date Deployed</td> 
      <td> 
       <h:outputText value="#{ud.dateDeployed}" 
           rendered="#{not DCProfileTabGeneralController.editable}" /> 
       <h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" /> 
      </td>          
     </tr> 
     <tr> 
      <td>Hour Deployed</td> 
      <td> 
       <h:outputText value="#{ud.hourDeployed}" 
           rendered="#{not DCProfileTabGeneralController.editable}" /> 
       <h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" /> 
      </td>          
     </tr> 

    </ui:repeat> 
</table> 

这个解决方案工作正常，但我想这样一来扩展它：我想点击开启按钮，将编辑标志设置为真。当我将鼠标移动到表格的值上时，outputText将更改为inputText。

还有一个更简单的问题。我如何在全球所有领域添加底部填充？

Answer 1

我建议你使用Richfaces库和使用<rich:inplaceInput>组件如下。

<rich:inplaceInput value="hhhh" editEvent="onmouseover"/> 

但是，如果您仍然想坚持javascript这是一个概念。

<h:form id="myForm"> 
    <h:outputText value="aaa" id="outText"/><br/> 
    <h:inputText value="aaa" style="display:none;" id="inText" /> 
</h:form> 

这是javascript代码

<script> 
    window.onload = function() { 
     var outputText = document.getElementById("myForm:outText"); 
     var inputText = document.getElementById("myForm:inText"); 
     outputText.onmouseover = function() { 
      outputText.style.display = 'none'; 
      inputText.style.display = ''; 
     } 
     inputText.onblur = function() { 
      outputText.style.display = ''; 
      inputText.style.display = 'none'; 
     } 
    }; 
</script> 

由于您使用的是ui:repeat，你应该相应地更改javascript代码。