jQuery addClass example

Change class name on click in jQuery

by Chris

HTML

<input type="button" name="start" id="start" value="Start" />
<div id="container"></div>

CSS

.display {
  width: 500px;
  background-color: red;
}

.display,
.display th,
.display td {
  border: 1px solid blue;
}

JavaScript

var data = {
  "1": {
    "fname": "Jon",
    "lname": "Wayne",
    "dob": "05/14/1987",
    "status": "Active",
    "color": "Red",
    "team": "Miami"
  },
  "2": {
    "fname": "Tim",
    "lname": "Ryan",
    "dob": "01/23/1967",
    "status": "Inactive",
    "color": "Blue",
    "team": "Chicago"
  },
  "3": {
    "fname": "Jim",
    "lname": "Carey",
    "dob": "11/02/1997",
    "status": "Suspended",
    "color": "Yellow",
    "team": "Denver"
  },
  "4": {
    "fname": "Chuck",
    "lname": "Norris",
    "dob": "09/06/1945",
    "status": "Active",
    "color": "Green",
    "team": "Boston"
  }
}

$('#start').on('click', showRecords);

function showRecords() {
  displayData(1, data);
}

function displayData(fnid, data) {
  var tbl = $('<table>').addClass('display').prop('id', 'data_tbl'),
    title = ['First Name', 'Last Name', 'DOB', 'Status', 'Color', 'Team'];

  /*** Start: Table Head ***/
  var thead = $('<thead>');
  var tr = $('<tr>');
  thead.append(tr);
  for (var t in title) {
    if (fnid === 1 && t > 3) continue;
    tr.append($('<th>').text(title[t]));
  }
  /*** End: Table Head ***/

  /*** Start: Table Body ***/
  var tbody = $('<tbody>');
  for (var key in data) {
    tr = $('<tr>');
    tbody.append(tr);
    tr.append($('<td>').text(data[key].fname));
    tr.append($('<td>').text(data[key].lname));
    tr.append($('<td>').text(data[key].dob));
    tr.append($('<td>').text(data[key].status));
    if (fnid !== 1) {
      tr.append($('<td>').text(data[key].color));
      tr.append($('<td>').text(data[key].team));
    }
  }
  /*** End: Table Body ***/

  tbl.append(thead); // Append header section to table.
  tbl.append(tbody); // Append body section to table.

  $("#container").empty().append(tbl);
}