html - Jquery selects wrong table's colgroup -


I have the following two tables: I should highlight colgroups with each mouseover for each, using jquery.

  & 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; & 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; & 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;   

Here is Jquery:

  $ ("table"). Representative ('td, th', 'mouseover mouse', function (e) {If (e.type == 'mouseover') {$ ("colgroup"). Eq ($ (this). Index (). AddClass ("Hover");} and {$ ("colgroup"). Eq ($ (this). Index ()). RemoveClass ("hover");}});   

The jquery works for the first table, but when I go to the first ball of the second table, the first column highlights from the first table. Highlight all columns 1-4 of column 1 in column 1 of column 2 When I do the fifth column in the second table, the first column is highlighted in the second table. And the second column is highlighted in the sixth column.

Why is everything offset like this?

I think the code below will fix your problem, but this is bee day, so It may be right :) The main thing is that you need to reduce your conjug group to the existing table only.

  $ ("table"). Representative ('TD, th') 'mouseover mouse', function (e) {var $ table = $ (this) .closest ("table"); If (e.type == 'mouseover') {$ table.children ("colgroup"). Eq ($ (This) .index ()) AddClass ("hover");} and {$ table.children ("colgroup"). Eq ($ (this) .index ()). RemoveClass ("hover");}});    

Comments

Popular posts from this blog

Python SQLAlchemy:AttributeError: Neither 'Column' object nor 'Comparator' object has an attribute 'schema' -

java - How not to audit a join table and related entities using Hibernate Envers? -

mongodb - CakePHP paginator ignoring order, but only for certain values -