So, I have a page that may or may not contain one or more large and complex tables. With jQuery, I add a background color to both tr and colgroup when hovering over tables.
The problem is that when I have more than one table, the page is larger than the viewport (the scroll bar is visible), and it does NOT affect the first table. I really don't know how to explain this, just run the snapshot below in full screen and you will see. Also, this does not happen in IE.
$("table").delegate('td','mouseover mouseleave', function(e) { var $table = $(this).closest('table'); if (e.type == 'mouseover') { $(this).parent().addClass("hover"); $table.children("colgroup").children("col").eq($(this).index()).addClass("hover"); } else { $(this).parent().removeClass("hover"); $table.children("colgroup").children("col").eq($(this).index()).removeClass("hover"); }; });
.hover { background-color: #ccc; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="margin: 60px;" cellpadding="10" cellspacing="0"> <colgroup> <col></col> <col></col> <col></col> <col></col> <col></col> </colgroup> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> </tr> </thead> <tbody> <tr> <td>1a</td> <td>2a</td> <td>3a</td> <td>4a</td> <td>5a</td> </tr> <tr> <td>1b</td> <td>2b</td> <td>3b</td> <td>4b</td> <td>5b</td> </tr> <tr> <td>1c</td> <td>2c</td> <td>3c</td> <td>4c</td> <td>5c</td> </tr> <tr> <td>1d</td> <td>2d</td> <td>3d</td> <td>4d</td> <td>5d</td> </tr> <tr> <td>1e</td> <td>2e</td> <td>3e</td> <td>4e</td> <td>5e</td> </tr> <tr> <td>1f</td> <td>2f</td> <td>3f</td> <td>4f</td> <td>5f</td> </tr> <tr> <td>1g</td> <td>2g</td> <td>3g</td> <td>4g</td> <td>5g</td> </tr> <tr> <td>1h</td> <td>2h</td> <td>3h</td> <td>4h</td> <td>5h</td> </tr> <tr> <td>1i</td> <td>2i</td> <td>3i</td> <td>4i</td> <td>5i</td> </tr> <tr> <td>1j</td> <td>2j</td> <td>3j</td> <td>4j</td> <td>5j</td> </tr> <tr> <td>1k</td> <td>2k</td> <td>3k</td> <td>4k</td> <td>5k</td> </tr> <tr> <td>1l</td> <td>2l</td> <td>3l</td> <td>4l</td> <td>5l</td> </tr> </tbody> </table> <table style="margin: 60px;" cellpadding="10" cellspacing="0"> <colgroup> <col></col> <col></col> <col></col> <col></col> <col></col> </colgroup> <thead> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> </tr> </thead> <tbody> <tr> <td>1a</td> <td>2a</td> <td>3a</td> <td>4a</td> <td>5a</td> </tr> <tr> <td>1b</td> <td>2b</td> <td>3b</td> <td>4b</td> <td>5b</td> </tr> <tr> <td>1c</td> <td>2c</td> <td>3c</td> <td>4c</td> <td>5c</td> </tr> <tr> <td>1d</td> <td>2d</td> <td>3d</td> <td>4d</td> <td>5d</td> </tr> <tr> <td>1e</td> <td>2e</td> <td>3e</td> <td>4e</td> <td>5e</td> </tr> <tr> <td>1f</td> <td>2f</td> <td>3f</td> <td>4f</td> <td>5f</td> </tr> <tr> <td>1g</td> <td>2g</td> <td>3g</td> <td>4g</td> <td>5g</td> </tr> <tr> <td>1h</td> <td>2h</td> <td>3h</td> <td>4h</td> <td>5h</td> </tr> <tr> <td>1i</td> <td>2i</td> <td>3i</td> <td>4i</td> <td>5i</td> </tr> <tr> <td>1j</td> <td>2j</td> <td>3j</td> <td>4j</td> <td>5j</td> </tr> <tr> <td>1k</td> <td>2k</td> <td>3k</td> <td>4k</td> <td>5k</td> </tr> <tr> <td>1l</td> <td>2l</td> <td>3l</td> <td>4l</td> <td>5l</td> </tr> </tbody> </table>
What's happening??
source share