{"id":732,"date":"2016-01-10T16:57:52","date_gmt":"2016-01-10T16:57:52","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=732"},"modified":"2023-10-15T09:43:15","modified_gmt":"2023-10-15T09:43:15","slug":"jquery-addclass-with-html-table-button-links-and-list-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/","title":{"rendered":"jQuery addClass with HTML Table, Button, Links and List"},"content":{"rendered":"

Purpose of addClass method<\/strong><\/h3>\n

The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call.<\/p>\n

If matched elements are more than one, the addClass method will add the given class(es) to all matched elements.<\/p>\n

For example, if you specified \u201cdiv\u201d as a sector and your web page contains one or more divs, the jQuery addClass will add given classes to all div elements.<\/p>\n

Syntax of addClass jQuery<\/strong><\/h4>\n

This is how you can use the addClass method:<\/p>\n

\n
$(\u201cselector\u201d).addClass(\u201cclass_to_add\u201d);<\/pre>\n
 <\/p><\/blockquote>\n
To add more than one classes, separate class names by space:<\/p>\n
\n
$(\u201cselector\u201d).addClass(\u201cclass1 class2\u201d);<\/pre>\n
 <\/p><\/blockquote>\n
I will show you jQuery $.addClass demos with HTML div, table, link, button and list elements in the following section.<\/p>\n
An example of using addClass with a div element<\/strong><\/h3>\n
In the demo, a div is created without any class initially. As you click the button \u201cAdd Class to div\u201d, it will add a CSS class created in the <style> section of <head> tag to that div. \"jQuery<\/p>\n
The following code is used in the click event<\/em> of button to add a class:<\/p>\n
$(document).ready(function(){\r\n\r\n$(\"#btnaddcls\").click(function(){\r\n\r\n$(\"#divcls\").addClass(\"addcls\");\r\n\r\n});\r\n\r\n});<\/pre>\n
See the complete code that you may try in your local computer:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n<\/script>\r\n<script>\r\n$(document).ready(function(){\r\n  $(\"#btnaddcls\").click(function(){\r\n    $(\"#divcls\").addClass(\"addcls\");\r\n  });\r\n});\r\n<\/script>\r\n<style>\r\n\r\n.addcls\r\n{\r\n  background: #D9534F;\r\n  width:220px;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:22px;\r\n  color:#fff;   \r\n}\r\n \r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"divcls\">Click the button to add a CSS class in div<\/div>\r\n<p>\r\n<button id=\"btnaddcls\">Add Class to div<\/button>\r\n<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
A demo of addClass with a div having a class already<\/strong><\/h3>\n
Generally, the addClass<\/em> method is used with the removeClass<\/strong> method. For that, first remove the used class by using removeClass method which is followed by addClass jQuery method. See this demo online:<\/p>\n
\"jQuery<\/p>\n
This time, the following code is used in the <script> section:<\/p>\n
\u00a0 $(\"#btnaddcls\").click(function(){\r\n\r\n$(\".divcls\").removeClass( \"divcls\" ).addClass( \"addcls\" );\r\n\r\n});<\/pre>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n<\/script>\r\n<script>\r\n$(document).ready(function(){\r\n  $(\"#btnaddcls\").click(function(){\r\n    $(\".divcls\").removeClass( \"divcls\" ).addClass( \"addcls\" );\r\n  });\r\n});\r\n<\/script>\r\n<style>\r\n\r\n.addcls\r\n{\r\n  background: #D9534F;\r\n  width:220px;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:22px;\r\n  color:#fff;   \r\n}\r\n \r\n.divcls{\r\n  background: #1A3C57;\r\n  width:220px;\r\n  border-radius: 15px;\r\n  padding:20px;\r\n  font-size:18px;\r\n  color:#fff;   \r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"divcls\">Click the button to first remove and then add a CSS class in div<\/div>\r\n<p>\r\n<button id=\"btnaddcls\">First remove then add class<\/button>\r\n<\/p>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
You see, first I removed the divcls<\/em>\u00a0CSS class that was applied initially. After that, I used addClass<\/em> method to add the addcls<\/em> class to that div.<\/p>\n
A demo of addClass with HTML table<\/strong><\/h3>\n
In this demo, an HTML table is created with a default class. A dropdown is also given where you may choose a different theme or class for that table.<\/p>\n
As you select a theme from the dropdown, the new theme will be applied to that table by using jQuery addClass method. First, have a look at that demo:<\/p>\n
\"jQuery<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
You can see the code in the demo page which is lengthy. As my focus is to explain the addClass method, so let me dig into this only.<\/p>\n
The HTML table was created with an id=tbl<\/em> and the demotbl<\/em> class which is defined in the <style> section. The <style> section has two other classes for that table.<\/p>\n
In the dropdown, the values are set to the class names that I created in the <style> section.<\/p>\n
As you select an option, the select change event happens, which is used in the <script> section just above the <\/body> tag. The selected value is assigned to a variable:<\/p>\n
var themetbl = document.getElementById(\"selecttheme\").value;<\/pre>\n
The next line of code removes the existing class by using removeClass<\/em> method and adds the new class by using addClass method:<\/p>\n
$(\"#tbl\").removeClass( ).addClass( themetbl );<\/pre>\n
That\u2019s it!<\/p>\n
An example with HTML button<\/strong><\/h3>\n
Similarly, you can use the addClass method to add the class(es) in HTML buttons. In this example, as you click the button, a class of CSS will be added to that button that contains properties to change the background, border, font-size, font-family etc. of that button.<\/p>\n
\"jQuery<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n<\/script>\r\n<script>\r\n$(document).ready(function(){\r\n  $(\"#btaddclass\").click(function(){\r\n    $(\"#btaddclass\").addClass(\"btnaddcls\");\r\n    $(\"#btaddclass\").html('New Class Added');\r\n  });\r\n});\r\n<\/script>\r\n<style>\r\n.btnaddcls{\r\n    background-color:#4F6677;\r\n    border: #2e6da4;\r\n  \tfont-family: Arial, Geneva, Arial, Helvetica,  sans-serif;\r\n\tfont-size: 15px;\r\n    color: #FFFFFF;\r\n    letter-spacing: 1px;\r\n    padding: 8px 12px;\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n\r\n    border-radius: 4px;\r\n    line-height: 1.5;\r\n    text-decoration:none;\r\n} \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<button id=\"btaddclass\">Add Class to this button<\/button>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
A demo with HTML lists<\/strong><\/h3>\n
In this example, I have created a list with a few menu items. Three links are given under the menu to change the theme. Upon clicking each link, the click event of that link occurs where I used the addClass method with removeClass to add the new class.<\/p>\n
\"jQuery<\/p>\n
Basically, the <li> and <a> tags of menu are contained in the <div> element which CSS class is changed at the click event of respective link by using this code:<\/p>\n
\u00a0 $(\"#addclass\").click(function(){\r\n\r\n$(\"#mainmenu\").removeClass().addClass(\"men_ex\");\r\n\r\n});\r\n\r\n\r\n\r\n$(\"#addclass2\").click(function(){\r\n\r\n$(\"#mainmenu\").removeClass().addClass(\"men_ex2\");\r\n\r\n});\r\n\r\n\r\n\r\n$(\"#addclass3\").click(function(){\r\n\r\n$(\"#mainmenu\").removeClass().addClass(\"men_ex3\");\r\n\r\n});<\/pre>\n
See the complete code below:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-1.10.1.min.js\"><\/script>\r\n<\/script>\r\n<script>\r\n$(document).ready(function(){\r\n  $(\"#addclass\").click(function(){\r\n    $(\"#mainmenu\").removeClass().addClass(\"men_ex\");\r\n  });\r\n\r\n  $(\"#addclass2\").click(function(){\r\n    $(\"#mainmenu\").removeClass().addClass(\"men_ex2\");\r\n  });\r\n  \r\n  $(\"#addclass3\").click(function(){\r\n    $(\"#mainmenu\").removeClass().addClass(\"men_ex3\");\r\n  });  \r\n  \r\n});\r\n<\/script>\r\n<style>\r\n.men_ex{\r\n    border-radius:5px;\r\n}\r\n.men_ex ul {\r\n    width:185px;\r\n    list-style-type: none;\r\n}\r\n\r\n.men_ex ul li a {\r\n    text-decoration: none;\r\n    color: #fff; \r\n    padding: 10.5px 11px;\r\n    background-color: #4EBBDB;\r\n    display:block;\r\n    border-bottom:solid 1px #000;\r\n}\r\n \r\n\/*Menu Theme 2*\/\r\n.men_ex2{\r\n    border-radius:5px;\r\n}\r\n.men_ex2 ul {\r\n    width:185px;\r\n    list-style-type: none;\r\n}\r\n\r\n.men_ex2 ul li a {\r\n    text-decoration: none;\r\n    color: #fff; \r\n    padding: 10.5px 11px;\r\n    background-color: #5BB75B;\r\n    display:block;\r\n    border-bottom:solid 1px #000;\r\n} \r\n\r\n\/*Menu Theme 3*\/\r\n.men_ex3{\r\n    border-radius:5px;\r\n}\r\n.men_ex3 ul {\r\n    width:185px;\r\n    list-style-type: none;\r\n}\r\n\r\n.men_ex3 ul li a {\r\n    text-decoration: none;\r\n    color: #fff; \r\n    padding: 10.5px 11px;\r\n    background-color: #F0AC4D;\r\n    display:block;\r\n    border-bottom:solid 1px #000;\r\n}\r\n \r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"men_ex\" id=\"mainmenu\">\r\n<ul>\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Products<\/a><\/li>\r\n<li><a href=\"#\">Services<\/a><\/li>\r\n<li><a href=\"#\">About<\/a><\/li>\r\n<li><a href=\"#\">Contact<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<a href=\"#\" id=\"addclass\">Menu Theme 1<\/a> |\r\n<a href=\"#\" id=\"addclass2\">Menu Theme 2<\/a> |\r\n<a href=\"#\" id=\"addclass3\">Menu Theme 3<\/a>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
Also see: jQuery removeClass<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Purpose of addClass method The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call. If matched elements are more than one, the addClass method will add the given class(es) to all matched elements. For example, if you specified \u201cdiv\u201d as a … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":736,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\njQuery addClass with HTML Table, Button, Links and List<\/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.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery addClass with HTML Table, Button, Links and List\" \/>\n<meta property=\"og:description\" content=\"Purpose of addClass method The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call. If matched elements are more than one, the addClass method will add the given class(es) to all matched elements. For example, if you specified \u201cdiv\u201d as a ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-10T16:57:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-15T09:43:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/01\/23.0_4-jQuery-addClass-button.png\" \/>\n\t<meta property=\"og:image:width\" content=\"218\" \/>\n\t<meta property=\"og:image:height\" content=\"58\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/\",\"name\":\"jQuery addClass with HTML Table, Button, Links and List\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-01-10T16:57:52+00:00\",\"dateModified\":\"2023-10-15T09:43:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery addClass with HTML Table, Button, Links and List\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery addClass with HTML Table, Button, Links and List","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.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/","og_locale":"en_US","og_type":"article","og_title":"jQuery addClass with HTML Table, Button, Links and List","og_description":"Purpose of addClass method The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call. If matched elements are more than one, the addClass method will add the given class(es) to all matched elements. For example, if you specified \u201cdiv\u201d as a ... Read more","og_url":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/","article_published_time":"2016-01-10T16:57:52+00:00","article_modified_time":"2023-10-15T09:43:15+00:00","og_image":[{"width":218,"height":58,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/01\/23.0_4-jQuery-addClass-button.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/","url":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/","name":"jQuery addClass with HTML Table, Button, Links and List","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-01-10T16:57:52+00:00","dateModified":"2023-10-15T09:43:15+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/jquery-addclass-with-html-table-button-links-and-list-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"jQuery addClass with HTML Table, Button, Links and List"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/732"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=732"}],"version-history":[{"count":7,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/732\/revisions"}],"predecessor-version":[{"id":10734,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/732\/revisions\/10734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/736"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}