JSF 2.0 Javascript和CSS表

我是JSF 2.0的新手，並且遇到了js/css事件的麻煩。基本上我有這樣的HTML代碼：JSF 2.0 Javascript和CSS表

<!-- CSS goes in the document HEAD or added to your external stylesheet --> 
<style type="text/css"> 
table.hovertable { 
    font-family: verdana,arial,sans-serif; 
    font-size:11px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #999999; 
border-collapse: collapse; 
} 
table.hovertable th { 
    background-color:#c3dde0; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #a9c6c9; 
} 
table.hovertable tr { 
    background-color:#d4e3e5; 
} 
table.hovertable td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #a9c6c9; 
} 
</style> 

<!-- Table goes in the document BODY --> 

<table class="hovertable"> 
<tr> 
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 
</tr> 
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td> 
</tr> 
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td> 
</tr> 
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td> 
</tr> 
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td> 
</tr> 
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td> 
</tr> 
</table>

它呈現一個簡單的表格是改變「鼠標懸停」它的顏色。我要「轉換」它JSF 2.0這樣的代碼：

<?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://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:ui="http://java.sun.com/jsf/facelets"> 
    <h:head> 
     <h:outputStylesheet library="css" name="table-style.css" /> 

    </h:head> 

    <h:body> 

     <h1>JSF 2.0 + Spring + Hibernate :)</h1> 

     <h:dataTable value="#{cBean.getcBeanList()}" var="c" 
       styleClass="hovertable" 
       > 
      <h:column> 
       <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId} 
      </h:column> 

      <h:column> 
       <f:facet name="header">Info Header 2</f:facet>#{c.name} 
      </h:column> 

      <h:column> 
       <f:facet name="header">Info Header 3</f:facet>#{c.address} 
      </h:column> 

     </h:dataTable> 

    </h:body> 
</html>

但包括onmouseover事件。

此外，cBean.getcBeanList()返回List<Object>

嗯，我想這一切，我希望你能幫助我。
在此先感謝。

來源

2011-02-20 Marco Aviles

如果don't care對IE6的用戶，只需使用:hover pseudoselector。將以下內容添加到您的CSS。

table.hovertable tbody tr:hover { 
    background: #ffff66; 
}

如果您因爲某些不明顯的原因關心它們，請使用JavaScript。

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 
for (var i = 0; i < trs.length; i++) { 
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'"); 
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'"); 
}

在窗口的加載過程中或結束時調用它。請注意，Javascript中的元素ID dataTable必須與生成的<h:dataTable>的HTML <table> ID完全相同。

<h:dataTable id="dataTable">

這對於使用jQuery的情況下jQuery.hover()函數是可能的。

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; }, 
    function() { this.bgColor = '#d4e3e5'; } 
);

來源

2011-02-21 13:06:26 BalusC

獲得功能最簡單的方法是使用RichFaces。 The dataTable in RichFaces爲您提供onRowMouseOver等選項。你可以使用它：

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

否則，你將不得不煮一些JavaScript。看看這個論壇主題：http://www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse（參見Munishķ辛格的響應 - 4回覆）

來源

2011-02-20 05:45:03

richfaces存在JSF 2.0問題 –

JSF 2.0 Javascript和CSS表

回答

相關問題