JavaScript Table Row Highlighter Class using Mootools

Jan
09

Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

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

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

This entry was posted on Wednesday, January 9th, 2008 at 12:22 pm and is filed under JavaScript, Mootools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “JavaScript Table Row Highlighter Class using Mootools”

  1. Tabellen « lab111 — Blog says:
    January 11, 2008 at 4:00 am

    [...] aber eine Lösung mit JavaScript. Und hier ist sie: JavaScript Table Row HighlighterClass von Andrew Sellick. Mit Mootools natürlich, versteht sich . Es fügt die Klassen automatisch zu, und fügt noch eine [...]

Leave a Reply