Question

I have a scrollable table with last column fixed because that column contain action buttons.
On html code they looks like: two divs with a table in each div, first div contain main table and on second div I have a table with only one column on which I have added action buttons. On tables I have a hover effect when cursor pass over tr td and on focus I applied a different background in order to highlights selected registration from table.
My problem is how can I have that hover and focus effect over booth tables in the same time when cursor pass over tr td because now they works independently on each table.

Please check my live example: http://mainpage.ueuo.com/

thank you.

Answer 1

look here http://jsfiddle.net/Ksb2W/5/

$(function(){
$('table tr td').click(function () { 
         var selected = $(this).parent(); 
         var index = selected.GetIndex();
            var parentOfRow = $(selected.parent()[0].tagName);

         //First remove the selectedRow class
        $(".selectedRow",parentOfRow).removeClass("selectedRow");
        parentOfRow.each(function(){
               $("tr:eq("+index +")",this).addClass("selectedRow");
         });
    });
$("tr").hover(function(){
     var row = $(this).GetIndex();
    $(".table").each(function(){          
          $("tr:eq("+row+")",this).addClass("hoverx");
    });
},function(){         
     var row = $(this).parent().children().index($(this));
    $(".table").each(function(){          
          $("tr:eq("+row+")",this).removeClass("hoverx");
    });
});
});

    jQuery.fn.GetIndex = function(){
        return $(this).parent().children().index($(this));
    }