javascript - 使用 JS 或 jQ 在悬停时突出显示包含相同信息的表格行

Question

我的老板告诉我要构建一个表格，其中的行会突出显示，如果 - 例如 - 文本或数字与另一行的第二列中的文本或数字相同，那么它也会突出显示。

我知道我可以给每一行一个类值，并使具有相同类的任何对象突出显示，但我的老板要求它根据特定列的文本或数字突出显示。

这是我的 jsFIDDLE 示例。

如果你查看每一行的第二列，你会发现第一行和第三行的值相同，所以如果我将鼠标悬停在第三行上，它应该与第一行一起突出显示反之亦然。

<table>
  <tr>
    <td>01/12/13</td>
    <td>1234567</td>
    <td>Lorem</td>
  </tr>
  <tr>
    <td>02/12/13</td>
    <td>7654321</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>02/01/14</td>
    <td>1234567</td>
    <td>Dolor</td>
  </tr>
</table>

我如何编写一个脚本来允许在不使用类的情况下发生这种情况？

Answer 1

// Mouse over event handler
$('table').on('mouseover', 'td', function() {
    // Store the hovered cell's text in a variable
    var textToMatch = $(this).text();

    // Loop through every `td` element
    $('td').each(function() {
        // Pull selected `td` element's text
        var text = $(this).text();

        // Compare this with initial text and add matching class if it matches
        if (textToMatch === text)
            $(this).parent().addClass('matching');
    });
});

// Mouse out event handler
// This simply removes the matching styling
$('table').on('mouseout', 'td', function() {
    $('.matching').removeClass('matching');
});

JSFiddle demo .

请注意，我稍微修改了您的 CSS 以添加:

tr:hover, tr.hover, tr.matching {
    background: #E5E5E5;
}