code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling.  In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

<table>

    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>Five</th>
        <th>Six</th>
    </thead>
    
    <tbody id="highlight">
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>

            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>

        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>

            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>

            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>

            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
    </tbody>
    

</table>

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’ );
    
</script>

class options

The Hightlighter class comes with several options built in to allow for easy customisation.  These include:

• rowColourClass – Can be named as you wish and referenced through css to produce your desired results.
• rowHoverColourClass – Can be named as you wish and referenced through css to produce your desired results.
• highlightRow – odd or even

An example of how this could be used is as follows:

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’, {highlightRow: ‘odd’, rowColourClass: ‘myRowClassOne’, rowHoverColourClass: ‘myRowHoverClassTwo’} );
    
</script>

mootools modules

The modules required for this class is as follows:

Core

• Core

Class

• Class

Native

• Array
• String
• Function
• Number
• Element

Element

• Element.Event