Table Row And Column Highlight On Hover Using JavaScript

Submitted by alpha_luna on Tuesday, April 19, 2016 - 17:01.
In this article, we are going to learn Table Row And Column Highlight On Hover Using JavaScript. The table row and column will be highlighted when the mouse hovers it. With the help of a script, this would be easy for us. So, let's try. Table Form - HTML This is the table where the user hovers it to highlighting the row and column.
  1.            <table class="tutorial-table" border="1">
  2.                   <thead>
  3.                           <tr>
  4.                                 <th class="table-header" width="10%">No.</th>
  5.                                 <th class="table-header">Title</th>
  6.                                 <th class="table-header">Description</th>
  7.                           </tr>
  8.                   </thead>
  9.                   <tbody>
  10.                           <tr class="table-row">
  11.                                 <td>1.</td>
  12.                                 <td>Solace</td>
  13.                                 <td>A psychic works with the FBI in order to hunt down a serial killer.</td>
  14.                           </tr>
  15.                           <tr class="table-row">
  16.                                 <td>2.</td>
  17.                                 <td>Sunset Song</td>
  18.                                 <td>The daughter of a Scottish farmer comes of age in the early 1900s.</td>
  19.                           </tr>
  20.                           <tr class="table-row">
  21.                                 <td>3.</td>
  22.                                 <td>The Trust</td>
  23.                                 <td>Waters and Stone are two nobody police officers who work in the evidence room of the Las Vegas Police.</td>
  24.                           </tr>
  25.                           <tr class="table-row">
  26.                                 <td>4.</td>
  27.                                 <td>The Huntsman: Winter's War</td>
  28.                                 <td>This follow-up to Snow White and the Huntsman begins when we see how Ravenna took over Snow White's.</td>
  29.                           </tr>
  30.                           <tr class="table-row">
  31.                                 <td>5.</td>
  32.                                 <td>Confirmation</td>
  33.                                 <td>Judge Clarence Thomas' nomination to the United States' Supreme Court is called into question when former colleague, Anita Hill, testifies that he had sexually harassed her.</td>
  34.                           </tr>
  35.                   </tbody>
  36.                 </table>
The Script This script will help us to do the function.
  1.                 <script src="js/code_js.js"></script>
  2.                 <script src="js/code_js1.js"></script>
  3.                 <script>
  4.                         $(document).ready(function() {
  5.                             $('.table-row').hover(function() {            
  6.                                         $(this).addClass('current-row');
  7.                             }, function() {
  8.                                         $(this).removeClass('current-row');
  9.                             });
  10.                            
  11.                             $("th").hover(function() {
  12.                                         var index = $(this).index();
  13.                                         $("th.table-header, td").filter(":nth-child(" + (index+1) + ")").addClass("current-col");
  14.                                         $("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","blue")
  15.                                 }, function() {
  16.                                         var index = $(this).index();
  17.                                         $("th.table-header, td").removeClass("current-col");
  18.                                         $("th.table-header").filter(":nth-child(" + (index+1) + ")").css("background-color","red")
  19.                                 });
  20.                         });
  21.                 </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         width:700px;
  4.         margin:auto;
  5. }
  6. .current-row {
  7.         background-color:pink;
  8.         cursor:pointer;
  9.         color:#FFF;
  10.         font-size:20px;
  11. }
  12. .current-col {
  13.         background-color:skyblue;
  14.         color:#FFF;
  15.         cursor:pointer;
  16.         font-size:20px;
  17. }
  18. .tutorial-table {
  19.         width: 100%;
  20.         font-size:18px;
  21.         border: blue 1px solid;
  22.         border-spacing: initial;
  23.         margin: 20px;
  24.         word-break: break-word;
  25.         table-layout: fixed;
  26.         cursor:pointer;
  27. }
  28. .tutorial-table th.table-header {
  29.         background-color: white;
  30.         text-align: center;
  31.         padding:10px;
  32.         cursor:pointer;
  33. }
  34. .tutorial-table .table-row td {
  35.         padding:10px;
  36.         cursor:pointer;
  37. }
  38. </style>
Output: The user mouse hovers to the table row side. Row The user mouse hovers to the table column side. Column So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
highlight text
Highlights Text

Add new comment

About text formats
  • 196 views