使用 DataTables 突出显示列和行

Posted 2023-02-19

【中文标题】使用 DataTables 突出显示列和行

【英文标题】：Column and row hilighting with DataTables

【发布时间】：2012-11-10 09:26:57

【问题描述】：

我正在使用 DataTables 并将这个有点尴尬的 javascript 组合在一起，以允许突出显示行和列。它基于此页面上的示例 (http://datatables.net/release-datatables/examples/api/highlight.html)。

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

$(document).ready(function() 
    $('#franchise_history').dataTable( 
        “bPaginate”：假，
        “bLengthChange”：假，
        “bFilter”：真，
        “bSort”：假，
        “bInfo”：是的，
        “bAutoWidth”：真，
        "sScrollY": "100%",
        "sScrollX": "100%",
        “asStripeClasses”：[]，
        “fnInitComplete”：函数（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');
            ， 功能（） 
                $('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 调试能力的极限。如果任何答案也解释了他们找到它所经历的调试过程，我将不胜感激。

【问题讨论】：

尝试完全按照您引用的示例中的方式使用代码。您进行了几项更改，导致它无法正常工作。

【参考方案1】：

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

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

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

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

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