{"id":113,"date":"2009-04-03T18:47:34","date_gmt":"2009-04-03T18:47:34","guid":{"rendered":"http:\/\/beta.robertprice.co.uk\/robblog\/2009\/04\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/"},"modified":"2009-04-03T18:47:34","modified_gmt":"2009-04-03T18:47:34","slug":"writing_a_jquery_plugin_to_stripe_a_table-shtml","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/","title":{"rendered":"Writing A jQuery Plugin To Stripe A Table"},"content":{"rendered":"

\nOne of the most powerful features of jQuery<\/a> is it’s plugin architecture. This allows developers to easily extend jQuery’s functionality.\n<\/p>\n

\nI’ve decided to extend my table striping example code<\/a> and turn it into a jQuery plugin. If I have a table with an id of test<\/var>, I want to be able to call a stripe<\/code> function on it’s selector, e.g. $('#test').stripe();<\/code>\n<\/p>\n

\nSo how do we build this? Well firstly, as it’s a plugin we shouldn’t really be playing with the $<\/var> jQuery object incase our user has disabled it. There is a trick to get around this though…\n<\/p>\n

(function($){
\n\/\/ code here can safely use $
\n})(jQuery);
\n<\/code><\/div>\n

What’s happening here? Well we’re using a closure to create an anonymous function into which we pass in the jQuery object. The parameter name we use in this function is $<\/var> so we can use this inside safely, even if the user has disabled this variable outside our plugin.
\nNow we have our $<\/var> variable we can get on with building the plugin.<\/p>\n

$.fn.stripe = function(options) {
\n\/\/ define our function action here.
\n}
\n<\/code><\/div>\n

\nHere we’ve added a function to jQuery called stripe and told it to reference a fuction we’ve defined. Now we need to add the magic to this function to actually do the striping.\n<\/p>\n

return this.each(function() {
\n$('\/tbody:first>tr:even',this).addClass('even');
\n$('\/tbody:first>tr:odd',this).addClass('odd');
\n});
\n<\/code><\/div>\n

\nAs a jQuery selector can run over multiple items, we need to make sure we iterate over each of these. We use jQuery’s built in each<\/code> function to do this. this<\/var> refers to the current selector in this case.\n<\/p>\n

\nInside, we need to select the first tbody element of the selection, then for each child tr depending if it’s odd or even we set the class of that tr to be either even<\/var> or odd<\/var>. This should ensure that nested tables won’t be striped.\n<\/p>\n

\nThat’s great, but what would be even more useful would be the ability to define different class names dynamically so we’re not stuck with the two hardcoded ones.\n<\/p>\n

\nThis is easy to achieve by creating a set of defaults in a private object, passing overrides into our function, and using jQuery’s excellent extend<\/code> function to merge the two.\n<\/p>\n

var defaults = {
\nodd : 'dark',
\neven : 'lite'
\n};
\nvar options = $.extend(defaults, options);
\n<\/code><\/div>\n

\nNow we can either just call .stripe<\/code> directory, or pass in override options like this, .stripe({odd: 'testdark', even: 'testeven')<\/code>\n<\/p>\n

\nPutting this all together, we get the following code for our stripe<\/code> plugin.\n<\/p>\n

(function($){
\n$.fn.stripe = function(options) {
\nvar defaults = {
\nodd : 'dark',
\neven : 'lite'
\n};
\nvar options = $.extend(defaults, options);
\nreturn this.each(function() {
\n$('\/tbody:first>tr:even',this).addClass(options.even);
\n$('\/tbody:first>tr:odd',this).addClass(options.odd);
\n});
\n}
\n})(jQuery);
\n<\/code><\/div>\n

\nA configurable jQuery plugin, in just 13 lines of JavaScript. Marvellous!<\/p>\n","protected":false},"excerpt":{"rendered":"

One of the most powerful features of jQuery is it’s plugin architecture. This allows developers to easily extend jQuery’s functionality. I’ve decided to extend my table striping example code and turn it into a jQuery plugin. If I have a table with an id of test, I want to be able to call a stripe … Continue reading “Writing A jQuery Plugin To Stripe A Table”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[31,32],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-dev","tag-javascript","tag-jquery"],"yoast_head":"\nWriting A jQuery Plugin To Stripe A Table - Robert Price<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Writing A jQuery Plugin To Stripe A Table - Robert Price\" \/>\n<meta property=\"og:description\" content=\"One of the most powerful features of jQuery is it’s plugin architecture. This allows developers to easily extend jQuery’s functionality. I’ve decided to extend my table striping example code and turn it into a jQuery plugin. If I have a table with an id of test, I want to be able to call a stripe … Continue reading "Writing A jQuery Plugin To Stripe A Table"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2009-04-03T18:47:34+00:00\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Writing A jQuery Plugin To Stripe A Table\",\"datePublished\":\"2009-04-03T18:47:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/\"},\"wordCount\":390,\"keywords\":[\"JavaScript\",\"jQuery\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/\",\"name\":\"Writing A jQuery Plugin To Stripe A Table - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2009-04-03T18:47:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/writing_a_jquery_plugin_to_stripe_a_table-shtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Writing A jQuery Plugin To Stripe A Table\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Writing A jQuery Plugin To Stripe A Table - Robert Price","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/","og_locale":"en_GB","og_type":"article","og_title":"Writing A jQuery Plugin To Stripe A Table - Robert Price","og_description":"One of the most powerful features of jQuery is it’s plugin architecture. This allows developers to easily extend jQuery’s functionality. I’ve decided to extend my table striping example code and turn it into a jQuery plugin. If I have a table with an id of test, I want to be able to call a stripe … Continue reading \"Writing A jQuery Plugin To Stripe A Table\"","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/","og_site_name":"Robert Price","article_published_time":"2009-04-03T18:47:34+00:00","author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Writing A jQuery Plugin To Stripe A Table","datePublished":"2009-04-03T18:47:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/"},"wordCount":390,"keywords":["JavaScript","jQuery"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/","name":"Writing A jQuery Plugin To Stripe A Table - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2009-04-03T18:47:34+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/writing_a_jquery_plugin_to_stripe_a_table-shtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Writing A jQuery Plugin To Stripe A Table"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}