Table with jQuery hover fade effect

Question

Trying to get this code below to work in order to highlight the full row and not just one cell.

JSFiddle

JS:

$(document).ready(function(){
    $('td[id*="dataRow"]').stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
    });
});

Any assistance would be great!

Answer 1

You should target .parent().

$(document).ready(function(){
    $('td[id*="dataRow"]').parent().stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).parent().stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).parent().stop().animate({"opacity": "0.2"}, "slow");
    });
});

Fiddle: http://jsfiddle.net/poxpsdza/4/