jquery table interlaced color plug-in

Plug-in code
;(function($) {$.fn.extend ({"Alterbgcolor":function(options) {Options=$.extend ({"Odd": "Odd",//the class of even rows"Even": "Even",//Odd Line Class"Selected": "Selected"//The row class is clicked},options);//the passed-in class parameter replaces the default class settingconsole.info (Options) $ ("Tbody tr:odd"). addclass (options.odd);//even line set class$ ("Tbody Tr:even"). addclass (Options.even);//Odd Line Set class$ ("tbody tr"). Click (function(){//Click events for Table Rows                //The current click line adds the selected style, the other lines remove the selected style, end () refers to the object and the $ (this), and the line's radio is selected$( This). addclass (options.selected). Siblings (). Removeclass (options.selected). End (). FIND (": Radio"). attr ("Checked",true);            }); //style of default selected row when page is loaded$ ("table:radio:checked"). Closest ("tr")). addclass (options.selected); return  This;//returns this to enable the method to be chained}) }) (jQuery);

Style:

Table{Border:1px Gray Solid;width:500px;Height:400px;text-align:Center;margin:0 Auto; }. Odd{Background-color:Gainsboro;}. Even{Background-color:#FFFFEE}. Selected{Background-color:Gold}

Html:

<Table>        <thead>        <TR>            <th></th>            <th>Name</th>            <th>Gender</th>            <th>Temporary land</th>        </TR>        </thead>        <tbody>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        <TR>            <TD><inputtype= "Radio"name= "Radio"></TD>            <TD>1</TD>            <TD>2</TD>            <TD>3</TD>        </TR>        </tbody>    </Table>

The code in <script>

$ (function() {            $ ("table"). Alterbgcolor ();//Call plugin, you can make your own style, with the "{}" object parameters of the way to pass        });

Note: The page needs to be first introduced into the jquery library

　　The jquery selector may match 1 or more elements, so the plug-in must consider these cases. You can call the each () method inside the plug-in to traverse the matching element and then execute the appropriate method, which in turn references each DOM element

The following jquery code shows:

;(function($) {    $.fn.extend ({        function(options) {            return  this. each (function() {                /// here Place the plug-in code             } );        }    });}) (jQuery);)

jquery table interlaced color plug-in