jQuery addClass example

Change class name on click in jQuery

by beebul

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="profile">&nbsp;</div>

CSS

body {
  font-size: .8rem;
}

h3 {
  font-size: 1rem;
}

.profile {
  padding: 1em;
}

JavaScript

$(document).ready(function() {
  $(function() {

    var dmJSON = "https://api.myjson.com/bins/1byll4";

    $.getJSON(dmJSON, function(data) {
      var tableData = {};

      var profile = _.filter(dmJSON, function(p) {
        return p.SATACCode == "414145";
      });

      data.profiles.map(function(profile) {
        if (tableData.hasOwnProperty(profile.SATACCode)) {
          tableData[profile.SATACCode] = tableData[profile.SATACCode].concat(profile);
        } else {
          tableData[profile.SATACCode] = [
            profile
          ];
        }
      });

      $.each(tableData, function(i, codeData) {
        var table = '<h3>' + codeData[0].ProgramName + ' <br>SATAC Code : ' + codeData[0].SATACCode + '</h3><table class="table table-bordered">';
        table += "<thead style='background:lightgrey;'><th style='width:50%'>Applicant Background</th><th style='width:25%'>Number of students</th><th style='width:25%'>Percentage of Students</th></thead>";

        codeData.map(function(f) {
          table += "<tr><td>" + f.ApplicantBackground + "</td><td>" + f.NumberOfStudents + "</td><td>" + f.PercentageOfAllStudents + "%</td></tr>";
        });

        table += "</table>";
        $('.profile').append(table);

      });
    });
  });
});