• Highlight a SharePoint List row on mouse over using jQuery

    by  • April 14, 2010 • MOSS 2007 • 4 Comments

    In this article we will see how to highlight list a row on mouse over using jQuery.

    Lets get started

    1. Create a Sharepoint list
    2. Edit allitems.aspx page and add a content editor web part and copy the below jquery and mouser over style to that webpart.

    
<script type="text/javascript">
$(document).ready(function()
{
$('td.ms-vb2').hover(function() {
$(this).parent().addClass("highlight");
// On mouseout, remove classes
}, function() {
$(this).parent().removeClass("highlight");
});

}); </script>
<style>
.highlight {background-color:#9AFEFF}
</style>

    About

    Hojo Clement was working in US Technology in Trivandrum as a Senior Software Engineer. He has 6 years experience in working with Web Development Technologies inlcuding MOSS and ASP.net.

    4 Responses to Highlight a SharePoint List row on mouse over using jQuery

    1. Tom
      October 19, 2010 at 6:48 pm

      After I make a content editor web part and copy the jquery and put it into the Source Editor, what do I need to change in the ‘script’ itself to make it work?

      Reply
    2. Shoban
      October 28, 2010 at 3:33 pm

      Hi Tom

      Nothing has to be edited. Is it not working?

      Shoban

      Reply
    3. Tom
      October 28, 2010 at 5:50 pm

      Shoban:

      No I can’t seem to get it working. I have added a Content Editor Web Part and then underneath it I have my webpart for a list of data, when I modify it on the tool pane, I have the options of Rich Text Editor and Source Editor which I can place text into.

      My understanding was that I was to copy the above jQuery script into the Source Editor for the Content Editor Web Part and that for every list of data on my page I should now have the ability of the hover (highlight) on mouse over process.

      Please let me know what I am doing incorrectly.

      Thanks
      – Tom

      Reply
    4. mr
      November 22, 2011 at 12:56 am

      .ms-vb2:hover
      {
      color: #fff;
      background-color: #307cae;
      }

      Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *