Pagination and alternating row color with mouseover highlighting row in table

armanbena
armanbena used Ask the Experts™
on
Hi,

I am returning data from a query.  I have pagination in the page to display 10 records per page.  I want to have alternating rows displayed as white and light blue.  When I move the mouse over, I want to have the row highlighted in a light yellow color.  I have that in place, but for some reason I have extra rows appearing above the table.  I think it has to do with the count, and the use of pagination.

This is what I have:
<cfoutput query="ListResult" startrow="#pagination.getStartRow()#" maxrows="#pagination.getMaxRows()#">
              <tr>
           

          <!---<tr class="#IIf(ListResult.CurrentRow Mod 2, DE('odd'), DE('even'))#" onmouseover="this.className='on';"
                   <cfif CurrentRow Mod 2>                                   
                onmouseout="this.className='odd'"
                  <cfelse>
                  onmouseout="this.className='even'"</cfif>>
                --->



.table-form-list tr  { }
.table-form-list tr.even  { background-color: #edf3fe }
.table-form-list tr.odd  { background-color: #fff }
.table-form-list tr.on  { background-color: #fefbea }
.table-form-list tr.top th    { color: #a9a9a9; font-weight: bold; background-color: #fff; background-image: none; background-position: 0 0; text-align: left; text-transform: none; white-space: nowrap; margin: 0; padding: 3px 3px 3px 6px; border-style: solid none none dotted; border-width: 1px 0 0 1px; border-color: #d3d3d3 }
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
actually you'd do something like
<style>
      tr.alt1 {
            background-color: ##ffffff;
      }
      tr.alt0 {
            background-color: ##cdf3fe;
      }
      tr.hover {
            background-color: ##ff5555;
      }      
</style>
<table style="background-color:gray;">
<cfloop from="1" to="2" index="currentrow"><!--- i'm using a loop to simulate your query --->
      <cfset classname="alt" & (currentrow mod 2)>
      <tr class="#variables.classname#"
            onmouseover="this.className='hover';"
            onmouseout="this.className='#variables.classname#';">
            <td>This is row #currentrow#</td>
      </tr>
</cfloop>
</table>
Carlos LlanosIT Manager

Commented:
Try something like this for the alternating rows..you will need two different images...

HTML Code:
 
<div align="center">
<div>
<table class="custom" cellspacing="15px;">
<tr>
		<th><h3>First Aid Kit - Location</h3></th>
</tr>

<?php
$query = mysql_query("SELECT * FROM jos_device_first_aid_kit order by location asc");
while ($rows = mysql_fetch_assoc($query))
{
?>


<tr onclick="document.location.href='index.php?option=com_jumi&view=application&fileid=25&Itemid=173&location=<?php print $rows['location'];?>'">
		<td style="text-align:center"><?php print $rows['location'];?></td>
</tr>

<?php
}
?>
</table>
</div>
</div>

Open in new window


CSS Code:
 
table.custom {
width:400px;
}
table.custom td {
height:75px;
background: url(../images/header.jpg);	
}
table.custom td:hover {
background: url(../images/header2.jpg);
cursor:hand;
cursor:pointer;
}

Open in new window

Do the following with highlight coloring:

<style>
tr.rowOdd {background-color: #CCCCCC;}
tr.rowEven {background-color: #E7E7E7;}
tr.rowHighlight {background-color: #FFFF99;}
</style>

<tr class="#IIf(CurrentRow Mod 2, DE('rowOdd'), DE('rowEven'))#" onmouseover="this.className='rowHighlight'"
      <cfif CurrentRow Mod 2>onmouseout="this.className='rowOdd'"<cfelse> onmouseout="this.className='rowEven'"</cfif>>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
</tr>
>  but for some reason I have extra rows appearing above the table.  I think it has to do with the count, and the use of pagination.

>  This is what I have:
    <cfoutput query="ListResult" startrow="#pagination.getStartRow()#" maxrows="#pagination.getMaxRows()



you're not showing enough code for us to help you with this part....




Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial