jQuery addClass example

Change class name on click in jQuery

by RaviMakwana

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>
<script>
   function GenerateObjectViewableLink(obj,text) {
      var pasObj = "";   
      try{ pasObj = JSON.stringify(obj).replace(/"/g,"'");}catch(e){ }		
           return "<span class='btn btn-default' href='#' onclick=\"GenerateTableByObject(this,"+pasObj+")\">"+text+"</span>";
    }
    
     function GenerateTableByObject(spanTag,object){
        var trContent ="<table border='1'>";
        for (var i in object) {
            trContent += "<tr><td>"+i+":</td><td>"+(typeof(object[i]) === "object" && !Array.isArray(object[i]) ? GenerateObjectViewableLink(object[i],"View Inner Data") :object[i])+"</td></tr>";
        }
        $(spanTag).removeAttr("onclick");
        $(spanTag).removeClass("btn btn-default");
        spanTag.innerHTML=trContent;
    }
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(document).ready(function () {
 		var obj = {Name:"Ravi",Age:25,Hobbies:["Draw","Photoshop","Editing","Cycling"],Education:{ HSC:"65%", BCA:"70%"},Sub:{ sub1:"sub 1", sub2:{ sub21:{ sub1:"sub 211", sub2:"sub 212"}, sub2:"sub 22"}}};
      $("#banner-message").html( GenerateObjectViewableLink(obj,"Data")  ).show(1000);
		GenerateObjectViewableLink()
 });