jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div id="print">
  <style>

    @media print {
      td{background-color: red !important;}   
    .break {page-break-after: always;}    
}
</style>
  <h1 id="group">
  </h1>
  <table class="table bordered">
    <thead>
      <th>Name</th>
      <th>Result</th>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

JavaScript

var response = {
  row1: [{
    group: 'Group A'
  }],
  row2: [{
      team: 'Team A',
      player: 'Jema',
      result: 43
    },
    {
      team: 'Team B',
      player: 'Deno',
      result: 34
    },
    {
      team: 'Team B',
      player: 'Niob',
      result: 56
    },
    {
      team: 'Team B',
      player: 'Skion',
      result: 49
    },
  ],
};

$("#group").html(response.row1.group);

var cats = {};
response.row2.forEach(function(element) {
  cats[element.team] = cats[element.team] || [];
  cats[element.team].push(element);
});

Object.keys(cats).forEach(function(team) {
  let html = '';
  html = '<tr>';
  html += '<td>' + team + '</td>';
  html += '</tr>';
  $('table').append(html);

  // Loop through the results for this category
  cats[team].forEach(function(element) {
    var names = element.player;
    var result = element.result;

    html = '<tr>';
    html += '<td>' + names + '</td>';
    html += '<td><input type="text" value="' + result + '"></td>';
    html += '</tr>';
    $('table').append(html);
  });

  // Append the textarea at the end of the results
  html = '<tr class="break">';
  html += '<td><textarea placeholder="textarea..."></textarea></td>';
  html += '</tr>';
  $('table').append(html);
});
var PrintThis = document.getElementById('print').innerHTML;
myWin = window.open("");
myWin.document.write(PrintThis);
myWin.print();
myWin.close();