This is the web log of Tim Bennett, web designer. He also runs Texelate, offering the best web design Leeds, Yorkshire has to offer

Table row and column highlighting

Wednesday, June 21st, 2006 at 8:18 am

 

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.

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>

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 2×4. 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:

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>

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

Table Code

<table>

    <tr>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×1″>1</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×2″>2</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×3″>3</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×4″>4</td>

    </tr>

    <tr>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×1″>5</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×2″>6</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×3″>7</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×4″>8</td>

    </tr>

    <tr>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×1″>9</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×2″>10</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×3″>11</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×4″>12</td>

    </tr>

    <tr>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×1″>13</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×2″>14</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×3″>15</td>

        <td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×4″>16</td>

    </tr>

</table>

And that’s it!

Leave a Reply

You must be logged in to post a comment. If you don't have an account register one now.

Do you need a website or web-related service?
I run an award-winning web design studio.