jQuery addClass example

Change class name on click in jQuery

by Shane Chambers

HTML

<div id="input-container">
  <input id="name" type="text" />
  <input id="number" type="number"/>
  <button id="add-button" class="button" >
  Add
  </button>
</div>
<table id="player-table">
<tr>
  <th>Name</th>
  <th>Number</th>
</tr>
<tr class="row">
  <td class="cell">Case Keenum</td>
  <td class="cell">4</td>
</tr>
</table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}



button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#player-table{
  color:white;
  background-color:lightgray;
  outline:white;
  
}

#player-table tr, #player-table th{
  background-color: black;
  
}

JavaScript

(function ( $ ) {
 
    $.fn.setupPlayers

  // find elements
  var $table = $("#player-table")
  var $nameInput = $("#name")
  var $numberInput = $("#number")

	// dynamically add a row, this could be coming from an api call, or some javascript
 function createRow(name, number){
    var temp = 
    `<tr class=\"row\"><td class=\"cell\">${name}</td><td class=\"cell\">${number}</td></tr>`;
    return temp;
  }

  function setupContainer(){
return `  <div id="input-container">
  <input id="name" type="text" />
  <input id="number" type="number"/>
  <button id="add-button" class="button" >
  Add
  </button>
</div>`;
}
function setupPlayerTable(){
return `<table id="player-table">
<tr>
  <th>Name</th>
  <th>Number</th>
</tr>
<tr class="row">
  <td class="cell">Case Keenum</td>
  <td class="cell">4</td>
</tr>
</table>`;
}
  
  

 });