Show-n-tell Thursday: highlighting web view rows on mouseover

This tip is actually a solution I posted on Notes.net... er, LDD, uh - developerWorks Forums... whatever. Someone was looking for a way to highlight rows in a web view as the user was mousing over them. Although I started out as a web developer, I've spent the past 5 years working primarily on client apps, so I occasionally try to answer questions like that just to refresh my memory.

Create your view and set it to treat contents as HTML. Don't bother trying to concatenate all of your content into a single column; just create individual columns, each using td tags around the content.

The first column of the view should just be this:

"<tr onMouseOver=\"TrowOn(this,'#ffffcc');\"
onMouseOut=\"TrowOff(this,'#DFDFDF');\">"

Then create all your columns, creating links inside td tags. Your final column is just a closing tr tag.

Then, in the JS Header of your viewtemplatedefault, add these functions:

function TrowOn(src,OnColor){
src.bgColor = OnColor;
}

function TrowOff(src,OffColor){
src.bgColor = OffColor;
}

This will handle the mouseover row color changes. Obviously you can adjust the hex values passed into the function in the view tr tags to get the colors you want.
Show-n-tell Thursday