Question

I’m using DataTables and have hacked together this somewhat embarrassing Javascript to allow row and column highlighting. It’s based on the example on this page ( http://datatables.net/release-datatables/examples/api/highlight.html ).

Here’s the relevant parts of the dataTable configuration:

$(document).ready(function() {
    $('#franchise_history').dataTable( {
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "sScrollY": "100%",
        "sScrollX": "100%",
        "asStripeClasses": [],
        "fnInitComplete": function (conf, json) {
            var tbl = $($.fn.dataTable.fnTables(true)).dataTable();
            $('td', tbl.fnGetNodes()).hover( function() {
                var iCol = $('td').index(this) % some_constant;
                var nTrs = tbl.fnGetNodes();
                $('td:nth-child('+(iCol+1)+')', nTrs).addClass('highlighted');
            }, function() {
                $('td.highlighted', tbl.fnGetNodes()).removeClass('highlighted');
            });
      }
} );
} );

some_constant is inserted by the templating code on the server. It’s the number of columns. Here’s the DataTables debug output: http://debug.datatables.net/oceqix and here’s the page it was derived from http://pro-football-history.com/franchise/37/pittsburgh-steelers-coaches

As you can see hovering over columns doesn’t properly hilight the right column. What’s going wrong here? I’m very clueless when it comes to Javascript and I’m basically at the limit of my JavaScript debugging ability here. I would appreciate it if any answers also explained the debugging process they went through to find it.

Answer 1

Looks like the problem in the following line

 var iCol = $('td').index(this) % some_constant;

Changing to the below should solve your problem:

var iCol = $('td', this.parentNode).index(this) % some_constant;

The issue is that $('td') gives you all TDs in the document but you need to get them only for the current row.