jquery - Same hover and focus over two aligned tables from different divs

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

Answer 2

我将使用这个可以修复列和行的 jQuery 插件，而不是这两个 DIV 方法：

http://fixedheadertable.com/

它将使您的 HTML 更加简单和标准。