Geek asks and answers

The same hover and focus on two aligned tables from different divs

I have a scrollable table with the last column, because this column contains action buttons. In the html code they look like this: two divs with a table in each div, the first div contains the main table, and in the second div I have a table with one column on which I added action buttons. On the tables, I have a hover effect when the cursor goes through tr td and I use a different background in focus to highlight the selected registration from the table. My problem is how can I have this hover and focus effect on the stand tables at the same time that the cursor goes through tr td, because now they work independently on each table.

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

thank.

+3
source share
2 answers

see 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));
    }
+4
source

Instead of the two DIV approaches, I would use this jQuery plugin, which can fix columns as well as rows:

http://fixedheadertable.com/

This will make your HTML simpler and more standard.

+1
source

More articles:


All Articles