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?

Why aren't you closing _any_ of your tags? Technically, it works, but it's horribly bad practice. — Bojangles, Jul 11 '12 at 23:40
Took them out just for this! The table wasn't as important, so just minimized it to the essentials. — Kushboy, Jul 11 '12 at 23:42
Please don't do that. Properly formatted HTML is pretty easy to read through, and altering your code from what you actually have makes your question confusing. — Bojangles, Jul 11 '12 at 23:43
The `$("colgroup")` selector is grabbing all of the colgroups, not just the one in the table you are mousing over — MrOBrian, Jul 11 '12 at 23:51
@MrOBrian It still only highlights one colgroup at a time, though. If it's grabbing all of them, would they all highlight? — Kushboy, Jul 11 '12 at 23:57
@Kushboy You're doing `.eq` to just grab one element, but within the `$("colgroup")` object, which is a collection of all `colgroup` elements on the page. `$(this).index()` gets the index of `$(this)` within its siblings, but `$("colgroup")` is more than just those siblings — MrOBrian, Jul 12 '12 at 00:06

score 2 · Accepted Answer · answered Jul 12 '12 at 00:12

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

Jquery selects wrong table's colgroup

1 Answers1