Creating a generic JavaScript function (within the AUI project) that would add classname “hover” to visually identify the cell row and column related with the <TD> cell where the cursor is focus.
Default table layout
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 | <table class="jTable" frame="hsides" rules="groups"> <thead> <tr> <td id="col1" class="first">Header, 1st cell</td> <td id="col2">Header, 2nd cell</td> <td id="col3">Header, 3rd cell</td> <td id="col4">Header, 4th cell</td> </tr> </thead> <tbody> <tr> <td headers="col1" class="first">Row1, 1st cell</td> <td headers="col2">Row1, 2nd cell</td> <td headers="col3">Row1, 3rd cell</td> <td headers="col4">Row1, 4th cell</td> </tr> <tr> <td headers="col1" class="first">Row2, 1st cell</td> <td headers="col2">Row2, 2nd cell</td> <td headers="col3">Row2, 3rd cell</td> <td headers="col4">Row2, 4th cell</td> </tr> </tbody></table> |
Expected mark-up of the same table when animated layout on “mouse hover” using jQuery
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 | <table class="jTable" frame="hsides" rules="groups"> <thead> <tr class="hover"> <td id="col1" class="first">Header, 1st cell</td> <td id="col2">Header, 2nd cell</td> <td id="col3" class="overRelated">Header, 3rd cell</td> <td id="col4">Header, 4th cell</td> </tr> </thead> <tbody> <tr> <td headers="col1" class="first">Row1, 1st cell</td> <td headers="col2">Row1, 2nd cell</td> <td headers="col3">Row1, 3rd cell</td> <td headers="col4">Row1, 4th cell</td> </tr> <tr class="hover"> <td headers="col1" class="first overRelated">Row2, 1st cell</td> <td headers="col2">Row2, 2nd cell</td> <td headers="col3" class="hover">Row2, 3rd cell</td> <td headers="col4">Row2, 4th cell</td> </tr> </tbody></table> |
I got an idea after seeing the behavior of that Firefox add-on for “Complex Table Mark-up (com tab) Toolbar” on Vision Australia website.
You must be logged in to post a comment.