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 id='manning-cell' class="cell">Peyton Manning</td>
  <td 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: #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")
	var $outputText = $("#output-text")


// handle click event for the 'Add' Button
  $("button").on("click", function(){
  	var row = createRow($nameInput.val(), $numberInput.val());   
    $table.append(row);  
  });
  
  //Dom traverse blunders 2, selecting all elements as the select does above can apply too 	 //many events
  /* $("#add-button").on("click", function(){
  	var row = createRow($nameInput.val(), $numberInput.val());   
    $table.append(row);  
  });
  */

	// 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}'`);
  });
   
 function traverser(){
 		
    // 1. Gather all tds, and display count
    var $tds = $('td');
    appendToTextArea(`1. Total tds '${$tds.length}'`);
    
    // 2. Get the sibling next to the manning-cell
    var $manningNumberCell = $("#manning-cell").next('td');
    var number = $manningNumberCell.html();
    appendToTextArea(`2. Mannings number is '${number}'`); 
    
 }
  
  // in order to 'append' text to a text area element, I need to get the text in it,
  // and append the new value to the textarea
 function appendToTextArea(text){
 	$outputText.val($outputText.val() +text+ "\n");
 }
  
	// dynamically add a row, this could be coming from an api call, or some javascript
 function createRow(name,...