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表

回答

相关问题