Table Highlighter
Many moons ago I wrote a plugin to do table highlighting. It has been sitting on tinyjs ever since and has proven to be quite popular
Since then my jQuery foo has improved a lot, so I thought it was about time to re make it. It should be much faster and handle larger datasets than before, it’s pretty straight forward to use, and this is how.
Working Example
| Visits | Unique Visits | Average Time | Bounce Rate | |
|---|---|---|---|---|
| jQuery Smart Modal | 109 | 82 | 00:02:50 | 81.58% |
| jQuery Draggable | 54 | 46 | 00:03:33 | 59.09% |
| Expanding Grid | 36 | 35 | 00:02:59 | 83.33% |
All you have to do is include the jQuery and the plugin file:
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('jquery', '1.3');
</script>
<script src='/path/to/plugin/file.js' type='text/javascript'></script>
Once thats loaded in you then need to use the plugin on the table of your choice; in this case the id is exampletableone so using the default classes, all you do is this:
<script type='text/javascript'>
jQuery('#exampletableone').tablehighlight();
</script>
In order for the plugin to visibly change you need to do some styling (with the default classes) something like this:
<style>
.active_column_header, .active_row_header{background:#A3A9E1;}
.active_row_data{background:#B7BEFC;}
tr.row td.active_position{background:black;color:white;}
</style>
That’s all you need to do!
Customisation
There are several options you can change and configure so the plugin works the way you need it to; these options are passed as normal.
Options
You pass in an object, which by default has these values, each item has a comment explaining it:
{
//selectors are the jquery selectors used to find things
"selectors":{
"headings":'.heading', //this is the row containing the main headers
'column_header': '.column_header', //the actual column header
'rows': '.row', //rows containing the actual data
'row_header': '.row_header', //part of the data row that acts as the header for that row
'row_data': '.row_data' //parts of the row that are data
},
"active_classes":{
"all": "active", //applied to all active elements
"column_header":"active_column_header", //applied to the currently active column header
"rows":"active_row", //applied to the currently active row
"row_header": "active_row_header", //the currently active row header
"row_data": "active_row_data", //the data elements within the active row
"current_hover": "active_position" //the element where you are hovering over
}
};
The Files
All the files that are used…
