Hilghligth columns and rows in different tables

Question

I'm following this Table Row and Column Highlighting method with the Delegate option to highlight rows and columns in a table. Works fine in a first table, but I'm not able to separate the effect when using two different tables at the same page: at the second table, the rows are highlighted but the columns are not isolated just a the current table but highlight the first one.

I already tried different alternatives modifying the script with no luck.

See the code snippet:

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

 table.blueTable { border: 1px solid #1C6EA4; text-align: left; border-collapse: collapse; } table.blueTable td, table.blueTable th { border: 1px solid #AAAAAA; padding: 4px 4px; } table.blueTable tbody td { font-size: 13px; } table.blueTable thead th { font-size: 15px; font-weight: bold; color: #353535; width: 80px; }.slim { width: 88px; }.hover { background-color: #eee; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>First Table</h1> <table class="blueTable"> <colgroup></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr> <td>cell1_1</td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr> <tr> <td>cell1_2</td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr> <tr> <td>cell1_3</td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr> <tr> <td>cell1_4</td><td>cell2_4</td><td>cell3_4</td><td>cell4_4</td></tr> </tbody> </table> <h1>Second Table</h1> <table class="blueTable"> <colgroup></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <colgroup class="slim"></colgroup> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr> <td>cell1_1</td><td>cell2_1</td><td>cell3_1</td><td>cell4_1</td></tr> <tr> <td>cell1_2</td><td>cell2_2</td><td>cell3_2</td><td>cell4_2</td></tr> <tr> <td>cell1_3</td><td>cell2_3</td><td>cell3_3</td><td>cell4_3</td></tr> <tr> <td>cell1_4</td><td>cell2_4</td><td>cell3_4</td><td>cell4_4</td></tr> </tbody> </table>

Answer 1

$("colgroup") doesn't refer to the colgroup inside the table that was clicked, just the first colgroup on the page. Try replacing

$("colgroup").eq(...)

with

$(this).closest("table").find("colgroup").eq(...)