• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

css /javascript row hovereffect problem

Hi,
I am using the following table row highlight effect from p7.

When you use it with row background colors - the background colors are cancelled out after the hover.  How do I fix this?

Cheers
Tania
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 
function P7_rowLite(tb,cl){ //v1.0 by PVII -table row highlighter
 var g,i,x,gr;if(document.getElementById){g=document.getElementsByTagName("TABLE");
 for(x=0;x<g.length;x++){if(g[x].className&&g[x].className==tb){
 gr=g[x].getElementsByTagName("TR");if(gr){for(i=0;i<gr.length;i++){
 if(i>0){gr[i].onmouseover=function(){this.className=cl;};
 gr[i].onmouseout=function(){this.className='';};}}}}}}
}
 
 
<!--
function p7runIt(){ //v1.0 PVII
P7_rowLite('prodtbl','rowLite');
}
onload=p7runIt;
//-->
 
</script>
<style type="text/css">
#datatable table {
	border-collapse: collapse;
	border: 0;
	font-size: 0.75em;
	width: 98%;
	margin: 0 auto;
}
#datatable th, #datatable td {
	text-align: left;
	padding: 4px;
	border: 1px solid #000;
	font-weight: normal;
}
.rowLite {
	cursor: default;
	background-color: #96CC36;
}
#datatable .row0 {
	background-color:#fff;
}
#datatable .row1 {
	background-color:#ffffcc;
}
#datatable .mainheader {
	background-color: #000;
	color: #fff;
}
</style>
</head>
<body>
<div id="datatable">
  <table border="1" class="prodtbl" runat="server" >
    <tr class="mainheader">
      <th>Courses</th>
      <th>Duration</th>
      <th>Dates</th>
    </tr>
    <tr class="row0" >
      <td>1 </td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr class="row1" >
      <td>1 </td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr class="row0" >
      <td>1 </td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr class="row1" >
      <td>1 </td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>
</div>
</body>
</html>

Open in new window

0
Tania_Farmer
Asked:
Tania_Farmer
1 Solution
 
thehagmanCommented:
The problem is:
Initially, your rows have class "row0" or "row1" respectively.
Hovering in, the class is set to "rowLite", then hovering out it is set to "".

Try the function below. It makes the classes change like "row0" -> "rowLite row0" -> "row0"

However, now the effects arelost because the css selector "#datatable .row0" is more specific than ".rowLite". Change the latter to e.g. "#datatable tr.rowLite" to make it more specific.

(If this is undesired, you max adapt the function below to achieve a cycle "row0" -> "rowLite ignore_row0" -> "rowLite" )
function P7_rowLite(tb,cl){ //v1.0 by PVII -table row highlighter
 var g,i,x,gr;if(document.getElementById){g=document.getElementsByTagName("TABLE");
 for(x=0;x<g.length;x++){if(g[x].className&&g[x].className==tb){
 gr=g[x].getElementsByTagName("TR");if(gr){for(i=0;i<gr.length;i++){
 if(i>0){gr[i].onmouseover=function(){this.className = cl + " " + this.className;};
 gr[i].onmouseout=function(){this.className=this.className.substr(cl.length+1);};}}}}}}
}

Open in new window

0
 
Tania_FarmerAuthor Commented:
That did it.

Thanks - it works great!
Tania
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now