Highlight table rows on hover containing same info with JS or jQ

Question

My boss told me to build a table with rows that highlight and if -for example- the text or number is the same as the text or number on another row's column-two, that will also highlight.

I know I can give each row a class value and make any object with the same class highlight but my boss requires it to highlight depending on the text or number of a certain column.

This is my jsFIDDLE example.

If you look at column-two of each row, you'll see that the value for row-one and three are the same, so if I was to hover over row-three, it should along with row-one highlight and vise versa.

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

How can I write a script which allows this to happen without using classes?

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.

Note that I've modified your CSS slightly to add:

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

Answer 2

Fiddle : 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');
    });

 });