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>
<tr class="row">
  <td class="cell">Peyton Manning</td>
  <td class="cell">18</td>
</tr>
<tr class="row">
  <td 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" />
  <button id="output-name-button" >
  Create alert with name
  </button>
</div>

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

/*
In this example you will still have the adding functionality, just with more rows in the
table. There will be multiple dom traversing examples, and some oops code.
*/


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

	// handle click event for the 'Create alert with name'
	$("#output-name-button").on("click", function(){
		// get the name input, there are two, so this will grab the first, not the second
  	var $name = $("#name")
    
    // how to fix by narrowing your dom traversal    
    // $name = $("#name", $(this).parent())
    
    
  	var length = $name.length; // although there are 2, this will only show 1
    var name = $name.val();
    alert(`The name is ${name}, and the number of names is ${length}`);
  });
  
	// handle click event for the 'Add' Button
  $("#add-button").on("click", function(){
  	var row = createRow($nameInput.val(), $numberInput.val());   
    $table.append(row);  
  });
  
  //Dom traverse blunders 2, selecting all elements, and applying events to all instead of
  //the one specific
  /* $("button").on("click", function(){
  	var row = createRow($nameInput.val(), $numberInput.val());   
    $table.append(row);  
  });
  */
  

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