jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="col-md-12 col-sm-12">
          <hr>
          <h4 style="float: left; text-align: left;">Select up to 3 books, Click "Compare Titles", View your Top Picks Side-by-Side!</h4>
          <button class='btn goCompare' data-show="back" style="color: white">Compare Titles</button>
          <button class='btn back' id="back" style="float: right; height: 34px; width: 140px; display:none;" onClick="refreshPage()">Back to Books</button>
          <table class='comparison' border="1px" style="float: left; margin-bottom: 2.5%;">
            <tbody>
              <tr class='product-img'></tr>
              <tr class='product-title'></tr>
              <tr class='product-impact'></tr>
              <tr class='product-oa'></tr>
              <tr class='product-scope'></tr>
              <tr class='product-orcid'></tr>
              <tr class='product-dsp'></tr>
            </tbody>
          </table>
        </div>

JavaScript

$(".btn.goCompare").on('click', function(e){
  e.preventDefault();
  buildComparisonTable();
});

function buildComparisonTable(){
debugger;
var comparisonTableBody = $('table.comparison tbody');
var comparisonTableBodyProductTitleCol = $('table.comparison tbody tr.product-title');
var comparisonTableBodyProductImgCol = $('table.comparison tbody tr.product-img');
var comparisonTableBodyProductScopeCol = $('table.comparison tbody tr.product-scope');
var comparisonTableBodyProductImpactCol = $('table.comparison tbody tr.product-impact');
var comparisonTableBodyProductorcidCol = $('table.comparison tbody tr.product-orcid');
var comparisonTableBodyProductoaCol = $('table.comparison tbody tr.product-oa');
var comparisonTableBodyProductdspCol = $('table.comparison tbody tr.product-dsp');

comparisonTableBody.find('.product-col').remove();
$('.product.compare').each(function(){

  var id = $(this).attr('data-id');
  var img = $(this).attr('data-img');
  var title = $(this).attr('data-title');
  var scope = $(this).attr('data-scope');
  var impact = $(this).attr('data-impact');
  var orcid = $(this).attr('data-orcid');
  var oa = $(this).attr('data-oa');
  var dsp = $(this).attr('data-dsp');

  comparisonTableBodyProductImgCol.append('<td class="product-col"><img src='+img+'></td>');
  comparisonTableBodyProductTitleCol.append('<td class="product-col">'+title+'</td>');
  comparisonTableBodyProductScopeCol.append('<td class="product-col">'+scope+'</td>');
  comparisonTableBodyProductImpactCol.append('<td class="product-col">'+impact+'</td>');
  comparisonTableBodyProductorcidCol.append('<td class="product-col">'+orcid+'</td>');
  comparisonTableBodyProductoaCol.append('<td class="product-col">'+oa+'</td>');
  comparisonTableBodyProductdspCol.append('<td class="product-col">'+dsp+'</td>');
});
}