Jquery custom table style _ jquery-js tutorial

This article mainly introduces how jquery can customize Table Styles, including the default status (Gray and gray), the mouse suspension status (green), and the mouse clicking status (yellow ), if you are interested, refer to the examples in this article to describe the jquery custom table style implementation code. Share it with you for your reference. The details are as follows:
The running effect is as follows:

The figure above has three statuses: the default status (Gray and gray), the mouse suspension status (green), and the mouse clicking status (yellow). How does this happen?
The Html code is as follows:

 
 
    
  
  
 
   
 
    
No.
 
    
Name
 
    
Age
 
    
Operation
 
   
 
  
    
  
  
 
   
 
    
1111
 
    
1111
 
    
1111
 
    
 
   
 
   
 
    
2222
 
    
2222
 
    
2222
 
    
 
   
 
   
 
    
3333
 
    
3333
 
    
3333
 
    
 
   
 
   
 
    
4444
 
    
4444
 
    
4444
 
    
 
   
 
   
 
    
5555
 
    
5555
 
    
5555
 
    
 
   
 
  
 
 

The plugin implementation code is as follows:

(Function () {$. fn. tabStyle = function (options) {// default parameter setting var settings = {evenClass: "tab_even", // even row style oddClass: "tab_odd", // hoverClass: "tab_hover", // mouse floating style clickClass: "tab_click", // Mouse clicking style isClick: true // whether to enable Mouse clicking style}; // merge parameters $. extend (settings, options); return this. each (function () {// Add the style for the odd and even rows respectively $ ("> tbody> tr: even", this ). addClass (settings. evenClass); $ ("> tbody> tr: odd", this ). addClass (settings. oddClass); $ ("> tbody> tr", this ). each (function (I) {// floating mouse style $ (this ). hover (function () {$ (this ). addClass (settings. hoverClass) ;}, function () {$ (this ). removeClass (settings. hoverClass) ;}); // click the style if (settings. isClick) {$ (this ). bind ("click", function () {$ (this ). addClass (settings. clickClass ). siblings ("tr "). removeClass (settings. clickClass );});}});});}})();

In some cases, we may not need the style after clicking the mouse, so we set isClick as the control switch. If you do not want to click a style, set it to false.
The DEMO is as follows:

  Table style (silver stick)    
 
 
    
  
  
 
   
 
    
No.
 
    
Name
 
    
Age
 
    
Operation
 
   
 
  
    
  
  
 
   
 
    
1111
 
    
1111
 
    
1111
 
    
 
   
 
   
 
    
2222
 
    
2222
 
    
2222
 
    
 
   
 
   
 
    
3333
 
    
3333
 
    
3333
 
    
 
   
 
   
 
    
4444
 
    
4444
 
    
4444
 
    
 
   
 
   
 
    
5555
 
    
5555
 
    
5555