Users online: 57

Most ever online: 291

People on this page: 1

Date: 24.07.2008

Time: 17:01:21

Table Row and Column Highlighting

>> Make a table with highlighting cells when the mouse is over

RESOURCE ADDED ON WEDNESDAY 21 JUNE 2006, 17:22:03

Written by Tim Bennett

You are going to learn how to make a table like this.

First off let's make the styles - put this in your <head> tag. You should customise this so that it fits in with your site. The crucial parts are the background-colors.

Code: Styles

<style media="all" type="text/css">

    body, html {

        font-family: Tahoma, sans-serif;
        font-size: 11px;
        color: #EEEEEE;
        background-color: #2A2A2A;

    }

    td {

        width: 50px;
        border: 1px solid #999999;
        cursor: pointer;
        text-align: center;

    }

    .row {

        background-color: #444444;

    }

    .rowhighlight {

        background-color: #666666;
        font-weight: bold;

    }

</style>

Downloads: 821

Now the bit that handles the rollovers - put this in your <head> tag also. Set the tablewidth and tableheaight variables so that they correspond to the numbre of cells in your table. We take the id of a cell and use this to work out the position of the mouse. An example of an id is 2x4. This equates to two rows across and four rows down. By split()ing this information we have an x and y co-ordinate. We then use this data along with the width and height of the table to switch the CSS classes of the cell:

Code: Scripts

<script language="javascript" type="text/javascript">

    var tablewidth = 4;
    var tableheight = 4;

    function cellevent( id, isover ) {

        var arr = id.split( 'x' );
        var x = arr[ 0 ];
        var y = arr[ 1 ];

        if( isover ) {

            var classnm = 'rowhighlight';

        }
        else {

            var classnm = 'row';

        }

        for( var counter = 1; counter <= tablewidth; counter ++ ) {

            document.getElementById( x + 'x' + counter ).className = classnm;

        }

        for( var counter = 1; counter <= tableheight; counter ++ ) {

            document.getElementById( counter + 'x' + y ).className = classnm;

        }

    }

</script>

Downloads: 571

Now for the actual table. We put the same code for onmouseover and onmouseout in each cell. Make sure the id are set correctly:

Code: Table Code

<table>
    <tr>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x1">1</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x2">2</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x3">3</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="1x4">4</td>
    </tr>
    <tr>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x1">5</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x2">6</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x3">7</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="2x4">8</td>
    </tr>
    <tr>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x1">9</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x2">10</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x3">11</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="3x4">12</td>
    </tr>
    <tr>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x1">13</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x2">14</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x3">15</td>
        <td onmouseover="cellevent( this.id, true );" onmouseout="cellevent( this.id, false );" class="row" id="4x4">16</td>
    </tr>
</table>

Downloads: 532

And that's it!

This resource has been viewed 8657 times.

Back to Resources

Back to Tutorials

Back to Web Clientside

Support Dr Quincy

These resources are provided free of charge. If, however, you would like to make a donation to help finance these resources, no matter how big or small, please use the PayPal button below.

Credits

This resource was written by Tim Bennett Bsc (Hons). Tim Bennett has a First Class Degree in Multimedia Systems Computing from Leeds Metropolitan University. He works as a freelance multimedia developer under the company name Texelate creating free and commissioned high-quality multimedia solutions. Find out more by visiting the portfolio section and viewing his blog. If you'd like to request a resource get in touch!

Rate this Resource

Click on the appropriate star below to rate this resource:

Vote 1

Vote 2

Vote 3

Vote 4

Vote 5

Vote 6

Vote 7

Vote 8

Vote 9

Vote 10

Num votes: 737

Average: 3.3 / 10

Comments

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com

http://amingholami.parsaspace.com
http://amingholami.parsaspace.com

dcgdfgb commented on 22/06/2008, 02:18:47

its really a good work, but let me know where can we use this.

syed commented on 11/06/2008, 20:49:56

Should be awarded tut. of the year

Darkhero commented on 06/09/2006, 20:24:15

Easy - just use the onclick handler instead.

DrQuincy commented on 26/08/2006, 10:51:57

my mailid is zaldip@yahoo.co.in

Jaldip Upadhyay commented on 26/08/2006, 08:40:33

Post a Comment

See all comments