Question

当光标悬停在上时，我有两个并排的表（＃table-desc-data 和＃compare-table-data ） compare-table-data ＃compare-table-data 中的整个行和列突出显示，并且＃table-desc-data 中的匹配行被认为是也是。

我的代码突出了一些作品，但在大桌子上呆滞，有时并不突出整行。有任何想法吗？（[JSFIDDLE] [1] - 删除。）

 //code to highlight columns and rows
        $("#compare-table-data td").hover(function () {
            $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').
            add($(this).parent()).addClass('compare-hover');
            var idx = $(this).closest('tr')[0].sectionRowIndex + 1;
            $('#table-desc-data').find('tr:nth-child(' + idx + ')').find('td').addClass('compare-hover');
        },

        function () {
            $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')').
            add($(this).parent()).removeClass('compare-hover');
            $('#table-desc-data').find('td').removeClass('compare-hover');
        });

Answer 1

如果你想要更好的表演，请在这样的结构中使用ID：

| cell_1_1 | cell_1_2 |
| cell_2_1 | cell_2_2 |

因此，例如，当您想要突出显示第一列时，您可以使用jQuery选择器，如：

$('td[id^=cell_1_]')

这些ID也由浏览器编制索引，速度更快

Answer 2

修复代码以使每一行都突出显示

添加到悬停输入功能：

$(this).parent().find('td').addClass('compare-hover');

添加到悬停离开功能：

$(this).parent().find('td').removeClass('compare-hover');

这不会影响迟缓。但是会让你的行变得高亮。

Answer 3

您只需使用tr:hover CSS突出显示一行即可。要突出显示列，您可以将类添加到相应的col。

示例html：

<table>
    <colgroup>
        <col></col>
        <col></col>
        <col></col>
    </colgroup>
    <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
    </tr>
    <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
    </tr>
</table>

示例css：

table {
    border-collapse: collapse;
}

table tr:hover {
    background-color: grey;
}

col.hovered {
    background-color: grey;
}

示例jQuery：

$('td').on( 'mouseenter', function() {
    var i = $(this).parent().children().index( this );
    $('col').removeClass('hovered');
    $('col:nth-child('+(i+1)+')').addClass('hovered');
} );

$('td').on( 'mouseleave', function() {
    $('col').removeClass('hovered');
} );

A jsFiddle can be found here

编辑：我认为css选择器tr:hover会比任何JavaScript解决方案更快 - 而且更可靠。通过将类附加到col而不是“某个列中的每个td”，您可以自行循环遍历某列中的所有单元格。这将由浏览器的CSS引擎完成。删除这个'hover-class'要容易得多，因为你只需要从所有col元素中删除该类并将其重新应用到正确的col（一个简单的任务），而不是循环遍历所有td到删除该类，然后通过循环遍历所有td再次应用它。对于这两种解决方案，我没有性能数据来支持它。

编辑2：要将类添加到第二个表中，它会变得有些混乱。 jQuery部分就是这样的。您需要对CSS进行的更改应该是显而易见的：

$('td').on( 'mouseenter', function() {
    var coli = $(this).parent().children().index( this );
    var rowi = $(this).parent().parent().index( $(this).parent() );
    $('col').removeClass('hovered');
    $('col:nth-child('+(coli+1)+')').addClass('hovered');
    //Do the same trick for rows in 'the other table'
    $('#table2 tr').removeClass('hovered');
    $('#table2 tr:nth-child('+(rowi+1)+')').addClass('hovered');
} );

$('td').on( 'mouseleave', function() {
    $('col').removeClass('hovered');
    $('#table2 tr').removeClass('hovered');
} );

慢表列和行荧光笔

3 个答案: