Skip to content
jQuery plugin used to select the entire table row and column in response to mouseenter and mouseleave events. Wholly supports table layouts that utilize colspan and rowspan.
Branch: master
Clone or download
Latest commit 6758259 Feb 15, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.readme Tweet button. Oct 16, 2014
demo
dist Use of ESLint. Feb 15, 2015
docs/static/image Building process optimisation. Oct 12, 2014
src
test Added highlightHorizontal and highlightVertical options. Sep 25, 2014
.bowerrc Building process optimisation. Oct 12, 2014
.eslintrc Use of ESLint. Feb 15, 2015
.gitignore Preparing new demo. Sep 25, 2014
.travis.yml Secret ENV for coveralls. Aug 22, 2014
LICENSE Building process optimisation. Oct 12, 2014
README.md Docs. Oct 16, 2014
bower.json Building process optimisation. Oct 12, 2014
gulpfile.js
karma.conf.js
package.json Use of ESLint. Feb 15, 2015

README.md

Wholly

Build Status Bower version Tweet Button

jQuery plugin used to select the entire table row and column in response to mouseenter and mouseleave events. Wholly supports table layouts that utilize colspan and rowspan.

Interactive demo.

How does it work?

If you want to support colspan and rowspan, then first you need to build table index, ie. matrix that identifies cell position in every row regardless of the markup. Then you need to track events of all the table cells and calculate their offset in the matrix and the columns that share the horizontal and vertical index.

The resulting lookup is illustrated in the following animation:

Wholly highlighting a matrix

Why not CSS?

There are at least a few ways to achieve column highlighting using just CSS or with little JavaScript, e.g.

Neither of the above solutions support rowspan or colspan. In essence, neither of the above will work if you have header groups, merged columns or a summarizing table footer. Wholly supports colspan and rowspan anywhere in the <table>.

Use case

Most often you'd use Wholly to highlight the entire column of the selected cell.

Table using Wholly

Wholly is not limited to setting a particular style. The custom event hooks allow you to select the entire row and column and can be used to copy the data, for selecting multiple columns, etc.

Usage

There are two options that automate highlighting:

$('table').wholly({
    highlightHorizontal: 'horizontal-class-name',
    highlightVertical: 'vertical-class-name'
});

The following events are available:

Event Name Description
wholly.mouseenter-horizontal Fired on the individual table cells.
wholly.mouseleave-horizontal Fired on the individual table cells.
wholly.mouseenter-vertical Fired on the individual table cells.
wholly.mouseleave-vertical Fired on the individual table cells.
wholly.mouseenter Fired on the whole table.
wholly.mouseleave Fired on the whole table.

To get the affected cells, use the the above events as such:

$('table').on('wholly.mouseenter-horizontal wholly.mouseleave-horizontal mouseenter-vertical mouseleave-vertical', function (e) {
    // e.target
});

$('table').on('wholly.mouseenter wholly.mouseleave', function (e, affectedAxes) {
    // affectedAxes.horizontal
    // affectedAxes.vertical
});
You can’t perform that action at this time.