Adding Mouse Over Row Highlighting To Tables

0 comments suggest edit

Intro

I have a bit of “me” time today to write some code and I thought I’d treat myself to something light and fun by building something purely for its flashiness and aesthetic. Something that does’t have any useful purpose other than it looks good.

I am a big fan of adding effects to html pages by simply adding a reference to a separate javascript file. This keeps the javascript code separated from the HTML, which is a big help in avoiding “spaghetti script”.

This is a technique that Jon Galloway writes about in his post on Markup Based Javascript Effect Libraries which highlights several approaches for adding interesting behaviors to a page without using Flash or DHTML behaviors (which only work in IE anyways). By referencing a javascript file and adding certain semantic markup to html elements, an author can add very interesting effects to a page.

The Row Mouse Over Effect

The effect I will introduce is simple. Adding a javascript file and a couple CSS classes will allow you to add row highlighting to any table. It provides a mean to change the look and style of a row when you mouse over it, and then change it back when you mouse out.

All you need to do is to reference the tableEffects.js javascript file and add the “highlightTable” css class to a table. At that point, each row of the table will have its CSS class changed to “highlight” or “highlightAlt” when moused over. Its CSS class will be reset when the mouse leaves.

In order to actually see a change when you mouse over, you’ll have to style the rows for highlighting like so:

table.highlightTable tr.highlight td
{
    background: #fefeee;
}
table.highlightTable tr.highlightAlt td
{
    background: #fafae9;
}

The script assumes you want to use a different color for alternating rows. If not, you can simply style both highlight and highlightAlt the same.

See It In Action

col 1 col 2 col 3 col 4
Apple Orange Banana Kiwi
Pinto Porsche Peugot Acura
LAX SFO ANC NYC
No Body Look Here
Red Blue Green Alpha

Get the file

Download the file from here (Right click and save as).

If you have any improvements (as I am sure there will be some), please let me know and I will keep my version updated. I named the script “tableEffects.js” because I hope to add more interesting effects.

And remember, though I tend to preach table-less design, there are semantic uses for tables. When using this script, it helps to make sure that your tables are semantically marked up. For example, if you don’t want your header row to highlight, use <th> tags instead of <tr>. The script ignores the table header tags.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

14 responses

  1. Avatar for Matthijs van der Vleuten
    Matthijs van der Vleuten February 5th, 2006

    At least on my system, the highlight is barely visible.

  2. Avatar for Haacked
    Haacked February 5th, 2006

    I've updated the styling so it's more noticeable.

  3. Avatar for Craig
    Craig February 6th, 2006

    I'm by no means a Javascript or HTML guy, but don't you want to use the same trick you use with onload to ensure that you don't whack an existing onmouseover or onmouseout event? But perhaps I'm displaying my ignorance.

  4. Avatar for Haacked
    Haacked February 6th, 2006

    Ummm yeah. Actually you would. Unless you're a control freak and don't care what other effects were in place.

  5. Avatar for rolling
    rolling May 9th, 2006

    No way. Firefox 1.5 doesn't see anything.
    There should be something wrong with your script.

  6. Avatar for anonymous person
    anonymous person June 21st, 2006

    Highlighting & 1.5.04 Firefox doesn't work for me either.

  7. Avatar for Ignatius
    Ignatius June 22nd, 2006

    There are a mistake in the script. indexOf return -1 if no matches, or the position where the string is. This means that if we have only the 'highlightTable' class, indexOf('highlightTable') returns 0, because the string starts in the first character (0).
    In your script appear [...]indexOf('highlightTable') > 0 but should be .indexOf('highlightTable') >= 0 (or != -1)
    PD: my english sucks :)

  8. Avatar for Haacked
    Haacked June 22nd, 2006

    Ignatius, thanks for the correction! I swear it used to work, but I must've made a breaking change. I really need to get some unit tests for my javascript.

  9. Avatar for Robert Nguyen
    Robert Nguyen September 15th, 2006

    Hi,
    Could you please help me on this, I wrote a simple page to take advance your TableEfects.js
    but id doesn't work and here is the code.
    ----
    <html>
    <head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.co...">
    <LINK href="help.css" type="text/css" rel="stylesheet">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function initRowHighlighting()
    {
    if (!document.getElementsByTagName){ return; }

    var tables = document.getElementsByTagName('table');

    for(var i = 0; i < tables.length; i++)
    {
    var table = tables[i];
    if(table.getAttribute('class') && table.getAttribute('class').indexOf('highlightTable') > -1)
    {
    //Make sure to use th tags for header row.
    attachRowMouseEvents(table.getElementsByTagName('tr'));
    }
    }
    }
    function attachRowMouseEvents(rows)
    {
    for(var i = 0; i < rows.length; i++)
    {
    var row = rows[i];
    if(i%2 == 0)
    {
    row.onmouseover =function()
    {
    this.setAttribute('oldClass', this.className);
    this.className = 'highlight';
    }

    row.onmouseout =function()
    {
    this.className = this.getAttribute('oldClass');
    }
    }
    else
    {
    row.onmouseover =function()
    {
    this.setAttribute('oldClass', this.className);
    this.className = 'highlightAlt';
    }

    row.onmouseout =function()
    {
    this.className = this.getAttribute('oldClass');
    }
    }
    }
    }
    //
    // addLoadEvent()
    // Adds event to window.onload without overwriting currently assigned onload functions.
    // Function found at Simon Willison's weblog - http://simon.incutio.com/
    //
    function addLoadEvent(func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    }
    else
    {
    window.onload = function()
    {
    oldonload();
    func();
    }
    }
    }
    addLoadEvent(initRowHighlighting);
    //-->
    </script>
    </head>
    <body MS_POSITIONING="GridLayout" onload="addLoadEvent(initRowHighlighting);">

    <form id="Form1" method="post" runat="server" >

    <table class="highlightTable">
    <tr class="highlight">
    <td>Sample 1</td>
    </tr>

    <tr class="highlightAlt">
    <td>Sample 1</td>
    </tr>
    <tr class="highlight">
    <td>Sample 1</td>
    </tr>

    </table>
    </form>

    </body>
    </html>
    ----

    Thanks
    Robert Nguyen

  10. Avatar for Steven Harman
    Steven Harman September 19th, 2006

    For those who might be interested...

    in the spirit of the OSS movement, I thought I would share my new version of the "Mouse Over Row Highlighting Effect"... hence the Redux.


    You can read more about it and grab the source here.

  11. Avatar for Drogfild
    Drogfild October 23rd, 2006

    It seems that IE doesn't support method ".getAttribute('class')".
    If you replace line "if(table.getAttribute('class') && table.getAttribute('class').indexOf('highlightTable') > -1)" with "if(table.className && table.className.indexOf('highlightTable') > -1)" it seems to work with IE also.
    --
    Drogfild

  12. Avatar for goog
    goog December 25th, 2006

    good work

  13. Avatar for phill
    phill May 2nd, 2007

    Nice work man.
    I totally agree, table-less design does not mean a ban on all tables. Semantic uses for tables still exist.
    Thanks for the script.

  14. Avatar for Josh Mitchell
    Josh Mitchell December 14th, 2007

    This is awesome! I'd like to use this on a webform I'm creating -- how hard would it be to convert this so that the highlighting happens when a form field within a row is clicked instead? I don't have a huge amount of programming background, so if you have an example, it would be greatly appreciated!
    Many thanks,
    Josh