While I was working in CustomWare I had the great pleasure of working with a guy called Sukri, a SharePoint developer. He's the kind of guy you'd mention something to, and it would tick over in the back of his mind, while he was doing his normal day-to-day work…. then a few days later, he'd come to you and say - "By the way, I know how we can address your client's requirements". Like he did for one of our clients… we were going through the client's needs, and we talked about how the client wanted to be able to present financial data in SharePoint, then allow the user to hover over and highlight a row of data… and allow the user to click the row and make it stay highlighted.

He came up with a script that allowed you to do both – then one of the other guys, Ben, decided to enhance it so you could select and deselect multiple rows. Here's a screenshot of how it looked on the screen…

Code:

<script language="javascript" type="text/javascript">
var preRow;
var preClassName;
var orgBColor;
var hoverColor = "#ffcc99";
var selectedColor = "#d2d2ff";
var SPGridViewGuid = "{<<LIST GUID>>}-{<<LIST VIEW WEB PART GUID>>}"; 

_spBodyOnLoadFunctionNames.push("addSelectedRowEvent");
function addSelectedRowEvent() {
// Get all TABLE tag objects
var oTables = document.getElementsByTagName("TABLE");
for (var i=0;i < oTables.length; i++ )
{
  // Filter where table id equal to SPGridView guid
  if (oTables[i].id == SPGridViewGuid)
       {
        // Get all TR tag objects
        var oRows = oTables[i].getElementsByTagName("TR");
        for (var j=0;j < oRows.length; j++ )
   {
    if (j != 0)
    {
     // Add client event onMouseOver
     oRows[j].onmouseover = function() {
      this.style.backgroundColor = hoverColor;
     }
     // Add client event onMouseOut
     oRows[j].onmouseout = function() {
      this.style.backgroundColor = "";
     }
     // Add client event onClick
     oRows[j].onclick = function() {
      // If previous row is not null 

      if(typeof(preRow) != 'undefined')
      { 

       // Assign previous stored background color and class name to TR object
	//Code below has been commented out prior to demo
	//
        //preRow.bgColor = orgBColor;
        //preRow.className = preClassName;
        // Change font weight
       // try{ChangeFontWeight(preRow,'normal');}catch(e){;}
      }
      // If this row is alternating row
      if(this.className != "")
      {
       // Assign previous alternating class to TR object
       preClassName = this.className;
       this.className = "";
      }
      // Assign new background color to TR object
       orgBColor = this.bgColor;
       if(this.bgColor == "#d2d2ff")
       {
       this.bgColor = "white";
       try{ChangeFontWeight(this,'normal');}catch(e){;}
       }
       else
       {
       this.bgColor = selectedColor;
        // Change font weight
       try{ChangeFontWeight(this,'bold');}catch(e){;}
       } 

      preRow = this;
     }
    }
   }
       }
}
}
function ChangeFontWeight(selectedRow,fontWeight) {
;
for (i=0;i<selectedRow.cells.length;i++)
{
  selectedRow.cells(i).style.fontWeight = fontWeight;
}
}
</script>

How it works:
The code you see above affects the HTML that is already on the page, so you need to position this at the end of the page below the list you are trying to modify. Because it is restricted to a list and a view, you can put it on a standard page (such as default.aspx) and it will only affect one of the views on the page.

Configuration:
The only thing you need to do before using this script is to replace <<LIST GUID>> with the list GUID, and <<LIST VIEW WEB PART GUID>> with the web part GUID. you get both of these from the URL when editing a "View" – all you need to do is strip off the %7B and &7D, and the %2D's replace with hyphens " - ".

Deployment:
I recommend creating a library and storing this as a .htm file – then referencing it from the Content Editor Web Part. Place the CEWP after the list view, and mark it as hidden. Change the title to something meaningful (such as Sukri's cool mouseover highlighting and multiclick code) and you're done!

Storing the code as a separate file in a helper library gives you maximum flexibility, minimum change (no unghosting of pages) and version control of your code.

Issues:
The only problem with the code is that it does not capture what the original background colour was – so if you click and unclick a row, it stays white. Not so bad if your list view is white rows, but an issue if you have alternating background colours. Ben was working on getting that resolved too, but he didn't get it debugged in time for the demo (check the highlighted part above). If anyone can see where the issue in the code is, please let me know :)

Cheers!

Brad