JSF 2.0 자바 스크립트 및 CSS 표

저는 JSF 2.0을 처음 사용하고 js/css 이벤트에 문제가 있습니다.JSF 2.0 자바 스크립트 및 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>

그것은 '마우스 오버'에 색상을 변경하는 간단한 테이블을 렌더링 : 는 기본적으로 나는이 html 코드가 있습니다. 나는이 같은 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 K 싱의 응답을 참조하십시오 - 4 응답)를

출처

2011-02-20 05:45:03

richfaces에는 JSF 2.0에 문제가 있습니다. –

JSF 2.0 자바 스크립트 및 CSS 표

답변

관련 문제