Question

Just edited:
I have a weird problem with a jQuery function. My function works well on a small jsFiddle on every browser example: http://jsfiddle.net/Ksb2W/72/
but if I want to integrate that function in my html page it is not working on Google Chrome and IE8. On Firefox works great.

Answer 1

From what I can see, your click is not highlighting the correct rows because the tables on your live site had a different layout in your example.

In the example your rows maps 1:1.

On the live site your second table has two extra rows:

<tr class="navigation"> ...
<tr class="headers"> ...

which obviously breaks your order-based matching.

Your hover is broken because, again, your example is different from your live site.

In your example you have:

$(".table").each(function(){          
    $("tr:eq("+row+")",this).addClass("hoverx");
});

but on the live site in focus.js you have:

$("table.grid tbody tr").each(function(){          
      $("tr:eq("+row+")",this).addClass("hoverx");
});

Note how you are looping over the rows in the second case.

Edit

I think using tbody to group the interactive rows is a nice solution to your problem of having additional rows in the second table. You could also simplify your javascript a bit as a result:

Example with second table having more rows

Per requested here’s what a solution using not would look like. Note you pretty much have to filter it out everywhere you select a tr.

Example using not and making the minimum amount of changes to the original code