I want to highlight a row in a JSF table. This is the code:

Question

0

Asked: June 1, 20262026-06-01T23:46:41+00:00 2026-06-01T23:46:41+00:00

I want to highlight a row in a JSF table. This is the code:

0

I want to highlight a row in a JSF table. This is the code:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      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>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
    </h:head>
    <h:body>

        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                    <h:form id="form">

                        <!-- The sortable data table -->
                        <h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item">


                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Account Session ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.aSessionID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="User ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.userID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity Start Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityStart}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity End Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityEnd}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activity}" />
                            </h:column>
                        </h:dataTable>

                        <!-- The paging buttons -->
                        <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                        <br />

                        <!-- The paging links -->
                        <ui:repeat value="#{SessionsController.pages}" var="page">
                            <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                           rendered="#{page != SessionsController.currentPage}" />
                            <h:outputText value="#{page}" escape="false"
                                          rendered="#{page == SessionsController.currentPage}" />
                        </ui:repeat>
                        <br />

                        <!-- Set rows per page -->
                        <h:outputLabel for="rowsPerPage" value="Rows per page" />
                        <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                        <h:commandButton value="Set" action="#{SessionsController.pageFirst}" />
                        <h:message for="rowsPerPage" errorStyle="color: red;" />

                    </h:form>                  

                </div>   

                <div id="settingsdiva" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:400px">

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

        <script type="text/javascript">
              $("tr").not(':first').hover(
              function () {
                $(this).css("background","#787878");
              }, 
              function () {
                $(this).css("background","");
              }
            );
        </script>


    </h:body>
</html>

The problem is that when I move the cursor on column 1, 2 and 3 the highlighting works

enter image description here

But when I move the cursor on column 4, 5 and 6 the rows are not highlighted.

enter image description here

I don’t find why the rows are not highlighted. Can you help me to find the mistake?

Best wishes

EDIT This is the clean HTML code:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
            <title>DX-57 History Center</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" />
            <link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" />
            <link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
            <link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />

            <!--[if lt IE 7]&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery/jquery.js&quot;&gt;&lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery/jquery.dropdown.js&quot;&gt;&lt;/script&gt;
            &lt;![endif]-->
            <!-- / END -->
        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script></head><body>

        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ul class="dropdown dropdown-horizontal" style="margin: 0 auto">
                <li><a href="/SR_57-1.0-SNAPSHOT/UserNav.jsf" class="dir">Home</a>
                    <ul>
                        <li><a href="Dashboard.jsf">Dashboard</a></li>
                    </ul>       
                </li>
                <li><a href="Sessions.jsf" class="dir">Sessions</a>
                </li>
                <li><a href="Application.jsf" class="dir">Application</a>
                    <ul>                
                        <li><a href="Glassfish.jsf">Glassfish</a></li>
                    </ul>
                </li>
                <li><a href="Linux.jsf" class="dir">Linux</a>                   
                </li>
                <li><a href="Database.jsf" class="dir">Database</a>                    
                </li>                   
            </ul>

        </div>  

        <div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;"><img src="resources/images/logo_sessions.png" alt="Dashboard" style="position:relative; top:-20px; left:9px;" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">
<form id="form" name="form" method="post" action="/HM_57-1.0-SNAPSHOT/Sessions.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />


                        <!-- The sortable data table --><table id="form:dataTable">
<thead>
<tr>
<th scope="col">
<script type="text/javascript" src="/HM_57-1.0-SNAPSHOT/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;stage=Development"></script>
<a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:j_idt15':'form:dataTable:j_idt15'},'');return false">Account Session ID</a></th>
<th scope="col"><a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:j_idt18':'form:dataTable:j_idt18'},'');return false">User ID</a></th>
<th scope="col"><a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:j_idt21':'form:dataTable:j_idt21'},'');return false">Activity Start Time</a></th>
<th scope="col"><a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:j_idt24':'form:dataTable:j_idt24'},'');return false">Activity End Time</a></th>
<th scope="col"><a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:j_idt27':'form:dataTable:j_idt27'},'');return false">Activity</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>1313</td>
<td>test</td>
<td>Sun Apr 08 20:21:44 EEST 2012</td>
<td>Sun Apr 08 20:21:46 EEST 2012</td>
<td>test

</td>
</tr>
<tr>
<td>23</td>
<td>werw</td>
<td>Tue Apr 10 15:20:14 EEST 2012</td>
<td>Tue Apr 10 15:20:16 EEST 2012</td>
<td>23</td>
</tr>
<tr>
<td>231257</td>
<td>323r</td>
<td>Tue Apr 10 15:20:51 EEST 2012</td>
<td>Tue Apr 10 15:21:05 EEST 2012</td>
<td>23</td>
</tr>
<tr>
<td>231432</td>
<td>23223r23</td>
<td>Tue Apr 10 15:20:41 EEST 2012</td>
<td>Tue Apr 10 15:20:55 EEST 2012</td>
<td>32r</td>
</tr>
<tr>
<td>232</td>
<td>test</td>
<td>Mon Apr 09 15:13:33 EEST 2012</td>
<td>Mon Apr 09 15:13:37 EEST 2012</td>
<td>test</td>
</tr>
<tr>
<td>2323165</td>
<td>2r23r</td>
<td>Tue Apr 10 15:20:49 EEST 2012</td>
<td>Tue Apr 10 15:21:04 EEST 2012</td>
<td>3r</td>
</tr>
<tr>
<td>232337</td>
<td>3r</td>
<td>Tue Apr 10 15:20:46 EEST 2012</td>
<td>Tue Apr 10 15:21:01 EEST 2012</td>
<td>23</td>
</tr>
<tr>
<td>232388</td>
<td>323r</td>
<td>Tue Apr 10 15:20:44 EEST 2012</td>
<td>Tue Apr 10 15:20:59 EEST 2012</td>
<td>r</td>
</tr>
<tr>
<td>233222</td>
<td>32r23r2</td>
<td>Tue Apr 10 15:20:42 EEST 2012</td>
<td>Tue Apr 10 15:20:57 EEST 2012</td>
<td>32r23</td>
</tr>
<tr>
<td>23329</td>
<td>2323</td>
<td>Tue Apr 10 15:20:47 EEST 2012</td>
<td>Tue Apr 10 15:21:02 EEST 2012</td>
<td>r2</td>
</tr>
</tbody>
</table>


                        <!-- The paging buttons --><input type="submit" name="form:j_idt30" value="first" disabled="disabled" /><input type="submit" name="form:j_idt31" value="prev" disabled="disabled" /><input type="submit" name="form:j_idt32" value="next" /><input type="submit" name="form:j_idt33" value="last" />Page 1 / 2
                        <br />

                        <!-- The paging links -->1<a href="#" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:j_idt36:1:j_idt37':'form:j_idt36:1:j_idt37'},'');return false">2</a>
                        <br />

                        <!-- Set rows per page --><label for="form:rowsPerPage">
Rows per page</label><input id="form:rowsPerPage" type="text" name="form:rowsPerPage" value="10" maxlength="3" size="3" /><input type="submit" name="form:j_idt41" value="Set" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="4271939619595356833:-5469736783226522469" autocomplete="off" />
</form>                  

                </div>   

                <div id="settingsdiva" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:400px">

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

        <script type="text/javascript">
              $("tr").hover(
              function () {
                $(this).css("background","#787878");
              }, 
              function () {
                $(this).css("background","");
              }
            );
        </script></body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-01T23:46:43+00:00

Editorial Team

2026-06-01T23:46:43+00:00Added an answer on June 1, 2026 at 11:46 pm

Remove the second DIV layer – settingsdiva

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I want to highlight a row in a JSF table. This is the code:

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply