Asp.Net - Using JavaScript to highlight table row

I'm using JavaScript to highlight table rows on mouse over:

      function HighlightRow(row) {
            row.style.backgroundColor = '#eeff00'
     }

      function UnHilightRow(row) {
            row.style.backgroundColor = '#ffffff'
      }        

In my table, the row background color alternates between white and lightgray.
When I mouse over a row it gets highlighted with yellow (as expected).
When I mouse out, the background color gets set to white.

I need to find a way to get the current row background color on mouse over and before highlighting.
Then when I mouse out of it, the background color needs to be reverted to what it was before.
Something like:

      function HighlightRow(row) {
            // Get current row background color
            ???
            // Highlight row:
            row.style.backgroundColor = '#eeff00'
      }

      function UnHilightRow(row) {
            // What was the original color?      
            var origRowColor = (??? from function above)

            // If it was White (or '#ffffff') then
            row.style.backgroundColor = '#ffffff'
            // Else
            // Revert to what it was before it got highlighted
            row.style.backgroundColor = origRowColor
      }        


 
LVL 13
RickAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

devlab2012Commented:
originalColor = "ffffff"; //use default color here
function HighlightRow(row) {
            originalColor = row.style.backgroundColor;
            // Get current row background color
            ???
            // Highlight row:
            row.style.backgroundColor = '#eeff00'
      }

      function UnHilightRow(row) {
            //whatever original color is, it will be set automatically
           //or is there any special consideration for white???
            row.style.backgroundColor = originalColor;
      }        

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Muhammad ZamanSoftware Development LeadCommented:
Hi,

Dear you can use following code:

<table>
    <tr style="background-color:Red;" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
    <td>test coloring</td>
    </tr>
    </table>

<script language="javascript" type="text/javascript">
var currBgColor;
     function HighlightRow(row) {
            bgColor=row.style.backgroundColor;
            row.style.backgroundColor = '#eeff00'
     }

      function UnHilightRow(row) {
            row.style.backgroundColor = bgColor
      }

</script>

Open in new window

Muhammad ZamanSoftware Development LeadCommented:
little emendment:

<table>
    <tr style="background-color:Red;" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
    <td>test coloring</td>
    </tr>
    </table>

<script language="javascript" type="text/javascript">
var currBgColor;
     function HighlightRow(row) {
            currBgColor=row.style.backgroundColor;
            row.style.backgroundColor = '#eeff00'
     }

      function UnHilightRow(row) {
            row.style.backgroundColor = currBgColor;
      }

</script>

Open in new window

Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

RickAuthor Commented:
Thank you.
kadabaCommented:
rick,

just my view.. why don't you have a class for the same and do? It will be more maintainable and in future if you wish to change colors it will be much easy.

I put up a small example after looking at your questions... hope this will help you in some way.

Best,
kadaba

<!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" />
<script type="text/javascript">
	function HighlightRow(row) {
		row.defaultClassName = row.className;
		row.className = "highlight";
	}

	function UnHilightRow(row) {
		row.className = row.defaultClassName;
	}       
</script>
<style type="text/css">
.highlight{
	background-color:#eeff00;
}
.even{
	background-color:#ffffff;
}
.odd{
	background-color:#aaaaaa;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr class="even" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
	<td>
		hello
	</td>
</tr>
<tr class="odd" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
	<td>
		world
	</td>
</tr>
<tr class="even" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
	<td>
		version
	</td>
</tr>
<tr class="odd" onmouseover="HighlightRow(this);" onmouseout="UnHilightRow(this);">
	<td>
		1
	</td>
</tr>
</table>
</body>
</html>

Open in new window

RickAuthor Commented:
Very nice idea, Kadaba.
Thank you very much.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.