jQuery addClass example

Change class name on click in jQuery

by Shane Chambers

HTML

<div id="input-container">
  <input id="name" type="text" value="The NAME"/>
  <input id="number" type="number" value="10"/>
  <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 id='keenum-cell' class="cell">Case Keenum</td>
  <td class="cell">4</td>
</tr>
<tr class="row">
  <td data-cell-name='name' id='manning-cell' class="cell">Peyton Manning</td>
  <td data-cell-name='number' id='number-cell' class="cell">18</td>
</tr>
<tr class="row">
  <td id='miller-cell' class="cell">Von Miller</td>
  <td class="cell">58</td>
</tr>
<tr class="row">
  <td class="cell">Bradley Chubb</td>
  <td class="cell">55</td>
</tr>
</table>


<div id="double-container">
  <label>Name</label>
  <input id="name" value="Random Name" />
  <button id="output-name-button" >
  Create alert with name
  </button>
</div>



<textarea  id="output-text"></textarea>

CSS

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

label{
  color: white;
}

textarea{
  width:100%;
  height:100px;
}



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

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

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

JavaScript

(function ( $ ) {
 
    $.fn.setupPlayers = function(){
    return this;
    }

  // 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>`;
}
  
  

 
}( jQuery ));