Wednesday, 26 October 2016

Table Column and Row Highlight by using Jquery CSS

           , ,      1 comment   
Hello friends in this tutorial we are going to learn simple but very useful concept in web development. Here we will discussing on how to change the background color of table row and column on mouse hover on table row and column by using Javascript library jquery and CSS. In this Jquery tutorial, we will highlight table column and row on mouse hover event. In Jquery there are several event for highlight table column and row. Here we will use jquery hover event for change background color of table column and row on same time. Under this hover() method. We will add or remove css class on mouse enter or mouse leave event of hover() method. Here we have simply fetch data from database and display that data under html table. In html table all table row has same class name for jquery selector and in different table column we have define different class name to table column. This way we have make html table structure for highlight table row and column on mouse over on particular table data. In jquery code we have use simple addClass() method and removeClass() method for highlight table column and row. Here addClass() method will add css class to particular element and it will highlight that element and by using removeClass() method, it will remove css class from particular element. This way we can highlight table column and row by using jquery code. By using this functionality into our web project we can easily identify large amount of data by highlighting table row and column.



Source Code


 
 <?php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 $query = "SELECT * FROM tbl_student ORDER BY student_id DESC";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Table Column and Row Highlight by using Jquery CSS</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>       
           <style>  
           .change_table_row  
           {  
                background-color:#f1f1f1;  
           }  
           </style>  
      </head>  
      <body>  
           <div class="container">  
                <h1 align="center">Table Column and Row Highlight by using Jquery CSS</h1><br />  
                <table class="table table-bordered">  
                     <tr bgcolor="#f1f1f1">  
                          <th width="10%" class="table-data1">ID</th>  
                          <th width="55%" class="table-data2">Student Name</th>  
                          <th width="35%" class="table-data3">Student Phone</th>  
                     </tr>  
                     <?php  
                     while($row = mysqli_fetch_array($result))  
                     {  
                     ?>  
                     <tr class="table-row">  
                          <td class="table-data1"><?php echo $row["student_id"]; ?></td>  
                          <td class="table-data2"><?php echo $row["student_name"]; ?></td>  
                          <td class="table-data3"><?php echo $row["student_phone"]; ?></td>  
                     </tr>  
                     <?php  
                     }  
                     ?>  
                </table>  
           </div>  
      </body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('.table-row').hover(function(){  
           $(this).addClass('change_table_row');  
      }, function(){  
           $(this).removeClass('change_table_row');  
      });  
      var class_name = '';  
      $('th').hover(function(){  
           class_name = $(this).attr('class');  
           $('.'+class_name).addClass('change_table_row');  
      }, function(){  
           $('.'+class_name).removeClass('change_table_row');  
      });  
      $('td').hover(function(){  
           class_name = $(this).attr('class');  
           $('.'+class_name).addClass('change_table_row');  
      }, function(){  
           $('.'+class_name).removeClass('change_table_row');  
      });  
 });  
 </script>

1 comment: