jquery Custom Table Style _jquery

This example describes the jquery custom table style implementation code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

Above this picture has 3 kinds of states, the default state (gray and white), mouse hover state (green), mouse click State (yellow), is how to achieve na?
The HTML code is as follows:

<table> <thead> <tr> <td> number </td> <td> name </td> <td> Age </td> <td> operation </td> </tr> </thead> <tbody> <t r> <td>1111</td> <td>1111</td> <td>1111</td> <td ><input type= "button" value= "View"/><input type= "button" value= "delete"/></td> </tr> &L t;tr> <td>2222</td> <td>2222</td> <td>2222</td>
      ; Td><input type= "button" value= "View"/><input type= "button" value= "delete"/></td> </tr>
        <tr> <td>3333</td> <td>3333</td> <td>3333</td>
      <td><input type= "button" value= "View"/><input type= "button" value= "delete"/></td> </tr> <tr> <td>4444</td> <td>4444</td> <td>4444</td> <td><input t
        Ype= "button" value= "View"/><input type= "button" value= "delete"/></td> </tr> <tr> <td>5555</td> <td>5555</td> <td>5555</td> <td><inpu T type= "button" value= "View"/><input type= "button" value= "delete"/></td> </tr> </tbody> &
 Lt;/table>

The

Plug-in implementation code is as follows:

(function () {$.fn.
          Tabstyle = function (options) {//default parameter set var settings = {evenclass: "Tab_even",//even row style Oddclass: "Tab_odd",//Odd line style Hoverclass: "Tab_hover",//mouse hover style Clickclass: "Tab_click",//Mice

        Punctuation style isclick:true//whether to open the mouse click style};

        Merge parameter $.extend (settings, options); Return This.each (function () {//) Add Style $ ("> Tbody > Tr:even", this) for odd even rows. addclass (Settings.even
          Class);


          $ ("> Tbody > Tr:odd", this). addclass (Settings.oddclass);
              $ ("> Tbody > TR", this). each (function (i) {//mouse hover style $ (this). Hover (function () {
            $ (this). addclass (Settings.hoverclass);
            The function () {$ (this). Removeclass (Settings.hoverclass);
            }); Mouse click Style if (Settings.isclick) {$ (this). Bind ("click", Function () {$(this). addclass (Settings.clickclass). Siblings ("tr"). Removeclass (Settings.clickclass);
            });
        }
          });
      });

 }
})();

Sometimes we may not need a mouse-click style, so set the Isclick as a control switch. If you don't want to click the style, set it to false. The
demo is as follows:

Through the detailed code above, you should use jquery custom table style, small series of table style is not perfect, but also need to improve, I hope that we finish this style based on the continued innovation, to do a form of their own.