jQuery toggleClass example

Toggle class name on click in jQuery

by Kamal Kumawat

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;
  width: 300px;
}

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

var data = [
  {
    isbn: '978-1-617-29207-1',
    title: 'jQuery in Action',
    authors: [
      'Bibeault, Bear', 'Katz, Yehuda', 'De Rosa, Aurelio',
    ],
    publisher: "Manning",
    publishYear: 2015,
    pages: 504,
  },
  {
    isbn: '978-1-933-98869-6',
    title: 'Secrets of the JavaScript Ninja',
    authors: [ 'Resig, John', 'Bibeault, Bear', ],
    publisher: "Manning",
    publishYear: 2013,
    pages: 370,
  },
  {
    isbn: '978-1-449-37321-4',
    title: 'JavaScript with Promises: Managing Asynchronous Code',
    authors: [ 'Parker, Daniel', ],
    publisher: "O'Reilly",
    publishYear: 2015,
    pages: 83,
  },
  {
    isbn: '978-1-449-30657-1',
    title: 'Building Hypermedia APIs with HTML5 and Node',
    authors: [ 'Amundsen, Mike', ],
    publisher: "O'Reilly",
    publishYear: 2011,
    pages: 219,
  },
  
  {
    isbn: '978-0-596-80582-1',
    title: 'REST in Practice: Hypermedia and Systems Architecture',
    authors: [
      'Webber, Jim', 'Parastatidis, Paras', 'Robinson, Ian',	     
    ],
    publisher: "O'Reilly",
    publishYear: 2010,
    pages: 428,
  },
];




function createTableInDom(ObjectData) {

  function tableRowDataElem( dataObj ) {
      var tRow = $('<tr>');
      Headings.forEach( eachHeading => {
      	var thData = "";
      	if(Array.isArray(dataObj[eachHeading["key"]])){
        	thData = dataObj[eachHeading["key"]].join("<br>");
        } else {
        	thData = dataObj[eachHeading["key"]].toString();
        }
        tRow.append($('<th>').html(thData));
      })
      return tRow;
  }

  // create table
  var table = $('<table>',{id:"bookSearch"});    
  table.appendTo(document.body);

  // Insert Heading
  var tHeadingRow = $('<thead>').appendTo(table);
  var tRow = $('<tr>').appendTo(tHeadingRow);
  var Headings = [
    { heading:"Authors", key:"authors" },
    { heading:"Title", key:"title" },
    { heading:"ISBN", key:"isbn" },
    { heading:"Publisher", key:"publisher" },
    { heading:"Year",...