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>
<div class="profile">&nbsp;</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto';
  font-size: .8rem;
}

h3 {
  font-size: 1rem;
}

.profile {
  padding: 1em;
}

JavaScript

$(document).ready(function() {
      $(function() {
      
      var SATACfilter = '414145';

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

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

                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);

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