Submit your widget

Simple jQuery Table Highlighter

Created 8 years ago   Views 13041   downloads 2413    Author charlesmarshall
Simple jQuery Table Highlighter
View DemoDownload 4.1 KB
133
Share |

This Table Highlighter is so faster and handle larger datasets , it’s pretty straight forward to use.

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>

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 article source:http://charlesmarshall.co.uk/jquery/2010/04/07/table-highlighter.html