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;
}

Answer 2

小提琴：http://jsfiddle.net/JLubs/4/

JS：

$(document).ready(function(){
    $('table tr td:nth-child(2)').each(function(){            
            $index =  $(this).parent().index()  ;
            var atext = $(this).html();            
            $('table tr td:nth-child(2):contains('+atext+')').not(this).parent().attr('match', $index );
        });


    $('[match]').on('mouseover', function(){
        $matchInde = $(this).attr('match');
        //alert($matchInde);
        $('table tr:eq('+parseInt($matchInde)+')').addClass('highlight');
    }).on('mouseout', function(){
        $matchInde = $(this).attr('match');
        $('table tr:eq('+parseInt($matchInde)+')').removeClass('highlight');
    });

 });

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

2 个答案: