Submit your widget

Simple jQuery Table Highlighter

Created 13 years ago   Views 8595   downloads 1993    Author charlesmarshall
Simple jQuery Table Highlighter
View DemoDownload
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=''  type='text/javascript'></script>
<script type='text/javascript'>
  google.load('jquery', '1.3');
<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'>

In order for the plugin to visibly change you need to do some styling (with the default classes) something like this:

.active_column_header, .active_row_header{background:#A3A9E1;}
tr.row td.active_position{background:black;color:white;}


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.


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
 "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
 "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: