Jquery selects wrong table's colgroup

Question

I have the following two tables. I'd like colgroups for each to highlite with a mouseover, using jquery.

<div id="one">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup>
            <thead>
                <tr>
                        <th>A</th>
                        <th>B</td>
                        <th>C</th>
                        <th>D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                </tr>
            </tbody>
    </table>
</div>
<div id="two">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup><colgroup><colgroup>                        
            <thead>
                <tr>
                         <th>A</th>
                         <th>B</th>
                         <th>C</th>
                         <th>D</th>
                         <th>E</th>
                         <th>F</th>
                </tr>
            </thead>
                <tbdoy>
                <tr>
                         <td>1</td>
                         <td>2</td>
                         <td>3</td>
                         <td>4</td>
                         <td>5</td>
                         <td>6</td>
                </tr>
           </tbody>
       </table>
</div>

Here is the Jquery:

$("table").delegate('td, th','mouseover mouseleave', function(e) {
              if (e.type == 'mouseover') {
                $("colgroup").eq($(this).index()).addClass("hover");
              }
              else {
                $("colgroup").eq($(this).index()).removeClass("hover");
              }
          });    

The jquery works for the first table, but when I go to the first col of the second table, the FIRST col from the FIRST table highlights. Columns 1-4 of Table 2 all highlight column 1-4 of table 1. When I do the FIFTH column in the second table, the FIRST column in the SECOND table highlights. And the sixth column makes the second column highlight.

Why is everything offset like that?

Answer 1

I think the below code will fix your issue, but it's bee a long day, so it might not be perfect :) The main thing is you need to reduce your colgroup collection down to just the current table being moused over.

$("table").delegate('td, th','mouseover mouseleave', function(e) {
          var $table = $(this).closest("table");
          if (e.type == 'mouseover') {
            $table.children("colgroup").eq($(this).index()).addClass("hover");
          }
          else {
            $table.children("colgroup").eq($(this).index()).removeClass("hover");
          }
      });