Databases
StackOverflow2013
Postsdbo
POJquery selects wrong table's colgroup
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery selects wrong table's colgroup
    text
    copied!<p>I have the following two tables. I'd like colgroups for each to highlite with a mouseover, using jquery.</p> <pre><code>&lt;div id="one"&gt; &lt;table border=1&gt; &lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;A&lt;/th&gt; &lt;th&gt;B&lt;/td&gt; &lt;th&gt;C&lt;/th&gt; &lt;th&gt;D&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="two"&gt; &lt;table border=1&gt; &lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt;&lt;colgroup&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;A&lt;/th&gt; &lt;th&gt;B&lt;/th&gt; &lt;th&gt;C&lt;/th&gt; &lt;th&gt;D&lt;/th&gt; &lt;th&gt;E&lt;/th&gt; &lt;th&gt;F&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbdoy&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;6&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>Here is the Jquery:</p> <pre><code>$("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"); } }); </code></pre> <p>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.</p> <p>Why is everything offset like that? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload