JSF 2.0 Javascript and CSS table

Question

I'm new to JSF 2.0 and I'm having troubles with js/css events. Basically I have this html code:

<!-- 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>

It renders a simple table that change its color on 'mouseover'. I want to "convert" it to JSF 2.0 code like this:

<?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>

but including onmouseover event.

In addition, cBean.getcBeanList() returns a List<Object>

Well, I think that's all, I hope you can help me.
Thanks in advance.

BalusC · Accepted Answer · 2011-02-21 13:06:26Z

If you don't care about IE6 users, just use :hover pseudoselector. Add the following to your CSS.

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

If you do care about them for some unobvious reasons, use 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'");
}

Call it during onload of the window or at end of the body. Note that the element ID dataTable in the Javascript has to be exactly the same as the generated HTML <table> ID of the <h:dataTable>.

<h:dataTable id="dataTable">

This is fancier possible with jQuery.hover() function, for the case you use jQuery.

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

Abdel Raoof Olakara · Accepted Answer · 2011-02-20 05:45:03Z

0

The most easy way to get the functionality is to use RichFaces. The dataTable in RichFaces provide you with onRowMouseOver and other options. You can use it as:

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

Otherwise you will have to cookup some javascript. Have a look at this forum thread: http://www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse (Refer to the response of Munish K Singh - 4th reply)

answered Feb 20, 2011 at 5:45

Abdel Raoof Olakara

19.4k11 gold badges92 silver badges134 bronze badges

1 Comment

Marco Aviles Over a year ago

richfaces has problems with JSF 2.0

Collectives™ on Stack Overflow

JSF 2.0 Javascript and CSS table

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related