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.
<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:
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.
1 Comment Received
Pingback & Trackback
Leave A Reply