Table column highlighting with jquery

Nikolaus Gradwohl2010-10-29T03:20:00+00:00

in one of my recent projects i needed to highlight a table row and column of a html table on mouseover.

i found out that it's quite simple to do in jquery - even without a plugin.

first you have to find out in which column your mouse pointer currently is.

var idx = $(this).parent().children('td,th').index( $(this))+1;

and then you mark all the td's and th's in the table with the same column index

$('td:nth-child('+idx+')').addClass( 'hover' );
$('th:nth-child('+idx+')').addClass( 'hover' );

click here to download a simple example project.

column and row heighlighting

Tweet This! submit to reddit Digg!   Tags: | 2 comments | no trackbacks

See also:

Lightbox-Effekt for Processing-Sketches
calling webservices from mootools, jquery or dojo
A Bitwig-Studio Controller Script for Yamaha MX49 and MX61 (Version2)
Javascript and Typescript link-collection
A Bitwig-Studio Controller Script for Yamaha MX49 and MX61



Leave a response

  1. Jayde 2010-11-10T14:40:11+00:00

    Your link to download the simple example project is broken.



  2. Nikolaus Gradwohl 2010-11-10T15:36:43+00:00

    Thanks for the info, the download-link is fixed

Leave a comment