0

我有 2 个并排的表（#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');
        });
4

3 回答 3

0

For a fix to your code to get every row to highlight

add to hover enter function:

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

add to hover leave function: 

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

This will no effect the sluggishness though. But will get your rows to hightlight.

于 2013-07-14T19:41:26.463 回答
0

如果您想要更好的性能，请在如下结构中使用 ID：

| cell_1_1 | cell_1_2 |
| cell_2_1 | cell_2_2 |

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

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

ID 也被浏览器索引，并且速度更快

于 2013-07-14T19:34:06.203 回答
0

您可以简单地使用tr:hoverCSS 突出显示一行。要突出显示一列，您可以将一个类添加到相应的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');
} );

可以在这里找到一个 jsFiddle

编辑：我认为 css 选择器tr:hover会比任何 javascript 解决方案更快 - 并且更可靠。通过将一个类附加到 acol而不是“某一列中的每个 td”，您可以避免循环遍历某一列中的所有单元格。这将由浏览器的 CSS 引擎完成。删除这个“悬停类”也容易得多，因为您只需要从所有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');
} );
于 2013-07-14T19:46:41.830 回答