javascript - Column and row highlighting not working with classes -
i have found table example after, doesn't conflict other tables on page need affect classes , not td , tr tags direct.
is possible? if example have below should , jsfiddle doing after changing classes.
example working: http://codepen.io/rglazebrook/pen/nazgy
<script> $('td').hover(function() { $(this).parents('table').find('col:eq('+$(this).index()+')').toggleclass('hover' ); }); </script> <style type="text/css"> body { font: 16px/1.5 helvetica, arial, sans-serif; } table { width: 80%; margin: 20px auto; border-collapse: collapse; } table th { text-align: left; } table tr, table col { transition: .3s; } table tbody tr:hover { background-color: rgba(0, 140, 203, 0.2); } table col.hover { background-color: rgba(0, 140, 203, 0.2); } </style> <div style="width:700px;"> <table> <col /> <col /> <col /> <col /> <thead> <tr> <th>name</th> <th>age</th> <th>birthdate</th> <th>preferred hat style</th> </tr> </thead> <tbody> <tr> <td>abraham lincoln</td> <td>204</td> <td>february 12</td> <td>stovepipe</td> </tr> <tr> <td>winston churchill</td> <td>139</td> <td>november 30</td> <td>homburg</td> </tr> <tr> <td>rob glazebrook</td> <td>32</td> <td>august 6</td> <td>flat cap</td> </tr> </tbody> </table> </div> jsfiddle not working (after change): https://jsfiddle.net/pr007qy8/
<script language="javascript"> hidetag('leftpane'); </script> <script> $('.data').hover(function() { $(this).parents('.tble').find('col:eq('+$(this).index()+')').toggleclass('hover'); }); </script> <style type="text/css"> body { font: 16px/1.5 helvetica, arial, sans-serif; } .tble { width: 80%; margin: 20px auto; border-collapse: collapse; } .tble .header { text-align: left; } .tble .rows, .tble col { transition: .3s; } .tble tbody .rows:hover { background-color: rgba(0, 140, 203, 0.2); } .tble col.hover { background-color: rgba(0, 140, 203, 0.2); } </style> <div style="width:700px;"> <table class="tble"> <col /> <col /> <col /> <col /> <thead> <tr class="rows"> <th class="header">name</th> <th class="header">age</th> <th class="header">birthdate</th> <th class="header">preferred hat style</th> </tr> </thead> <tbody> <tr class="rows"> <td class="data">abraham lincoln</td> <td class="data">204</td> <td class="data">february 12</td> <td class="data">stovepipe</td> </tr> <tr class="rows"> <td class="data">winston churchill</td> <td class="data">139</td> <td class="data">november 30</td> <td class="data">homburg</td> </tr> <tr class="rows"> <td class="data">rob glazebrook</td> <td class="data">32</td> <td class="data">august 6</td> <td class="data">flat cap</td> </tr> </tbody> </table> </div> thanks
add class table, example my-table. , use in js - $(this).parents('.my-table').
// css newbie article here: // http://www.cssnewbie.com/simple-table-column-highlighting/ $('td').hover(function() { $(this).parents('.my-table').find('col:eq('+$(this).index()+')').toggleclass('hover'); });body { font: 16px/1.5 helvetica, arial, sans-serif; } table { width: 80%; margin: 20px auto; border-collapse: collapse; } table th { text-align: left; } table tr, table col { transition: .3s; } table tbody tr:hover { background-color: rgba(0, 140, 203, 0.2); } table col.hover { background-color: rgba(0, 140, 203, 0.2); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="my-table"> <col /> <col /> <col /> <col /> <thead> <tr> <th>name</th> <th>age</th> <th>birthdate</th> <th>preferred hat style</th> </tr> </thead> <tbody> <tr> <td>abraham lincoln</td> <td>204</td> <td>february 12</td> <td>stovepipe</td> </tr> <tr> <td>winston churchill</td> <td>139</td> <td>november 30</td> <td>homburg</td> </tr> <tr> <td>rob glazebrook</td> <td>32</td> <td>august 6</td> <td>flat cap</td> </tr> </tbody> </table>
Comments
Post a Comment