Highlight Table Rows and Columns with Wholly jQuery Plugin

Wholly is a jQuery plugin that highlights html table rows and columns by triggering specific events on mouse enter and mouse leave.

wholly highlight table rows and columns

How to Use Wholly?

Step 1:

You should include jQuery Library and Wholly jquery plugin like below


<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="path-to-plugin/jquery.wholly.js"></script>

Step 2: Basic HTML Markup

Create a basic table with html.


<table>
 <thead>
 <tr>
 <th></th>
 <th></th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </tfoot>
</table>

Step 3: Initializing Wholly

Now all you need to do is initialize Wholly plugin like below.


$(function () {
    var table = $('table');

    table.wholly();

    table.on('wholly.mouseenter', 'td, th', function () {
        $(this).addClass('wholly-highlight');
    });

    table.on('wholly.mouseleave', 'td, th', function () {
        $(this).removeClass('wholly-highlight');
    });
});

We have mouseenter and mouseleave events to add and remove a class called ‘wholly-highlight’ respectively.

Now add a perfect css for that class.

I’ll see you on next post.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *