Change background of specific cells

Question

When I have setup a webgrid like this:

Id | Name |  Last Name   
1  | Eve    | Beckham
2  | John   | Doe
3  | Eve    | Davis
4  | Jacky  | Jackson
5  | Michael| Jackson

Is it possible, that when a user hovers over a cell containing "Jackson" that all the cells containing Jackson change there background? (the same for example for the first names when hovering above a cell containg "Eve")

I will use the EntityFramework to fill the webgrid.

How can I achieve such behavior?

Answer 1

You have to do this with client-side code. jQuery is the preferred library for DOM manipulation. The following will do what you want:

$(function () {
    $('td').mouseenter(function () {
        $('td:contains('+$(this).text()+')').css('background-color', 'yellow');
    });
    $('td').mouseleave(function () {
        $('td:contains('+$(this).text()+')').css('background-color', 'white');
    });
});