jQuery addClass example

Change class name on click in jQuery

by davehol

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

.xm-grouped-table a:hover {
    color: rgb(58, 58, 58);
    opacity: 0.5;
    text-decoration: underline;
}

.rmit-table__wrapper {
  overflow-x: auto;
}

JavaScript

var prog_list = (function() {

  var prog_table = $(".xm-grouped-table");
  var div1, div2, div3, init, setStyle, tabe_style;
  
  setStyle = function(st){
  	table_style = st;
  }
  
  init = function(){
    $.each(prog_table, function(index) {
    //console.log(index);
      $(this).find("tr").unwrap();
      $(this).wrapInner("<tbody></tbody>");
      $(this).attr({
        width: "100%",
        cellspacing: "1",
        border: "1",
        cellpadding: "1"
      });
      $(this).find(".m-program-list-location a").contents().unwrap();
      div1 = $("<div></div>").addClass("table rmit-table__" + table_style + " aem-GridColumn aem-GridColumn--default--12");
      div2 = $("<div></div>").addClass("rmit-table__wrapper");
      div3 = $("<div></div>").addClass("cmp-text");
      $(this).wrap(div1).wrap(div2).wrap(div3);
      $(this).removeClass("table");
      $(this).find(".m-program-list-title .visible-xxs").removeClass("visible-xxs").addClass("hide");
      $(this).find("caption").remove();

      $(this).find("th").eq(4).text("");
      $(this).find("th").eq(3).hide();
      $(this).find("tr").each(function(index) {
        if (index !== 0) {
          $row = $(this);
          $row.find("td").eq(4).find("a").eq(1).attr("href", $row.find("td").eq(1).find("a").attr("href")).text("Learn more");
          $row.find("td").eq(3).hide();
        }
      });


    });
  }
  
  return{
  	init:init, 
    changeStyle:setStyle
  }
})();

prog_list.changeStyle("bluestyle");
prog_list.init();