Question

我正在使用DataTables并且已经将这个有点令人尴尬的Javascript一起攻击，以允许行和列突出显示。它基于此页面上的示例（http://datatables.net/release-datatables/examples/api/highlight.html）。

以下是dataTable配置的相关部分：

$(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由服务器上的模板代码插入。这是列数。这是DataTables调试输出：http://debug.datatables.net/oceqix，这是从http://pro-football-history.com/franchise/37/pittsburgh-steelers-coaches

派生的页面

正如您所看到的，将鼠标悬停在列上并不能正确地使用右列。这里出了什么问题？当谈到Javascript时，我非常无能，我基本上处于JavaScript调试能力的极限。如果有任何答案也解释了他们经历的调试过程，我将不胜感激。

Answer 1

看起来像以下一行中的问题

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

更改为以下内容可以解决您的问题：

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

问题是$('td')为您提供了文档中的所有TD，但您只需要为当前行获取它们。

使用DataTables进行列和行hilighting

1 个答案: