JSFiddle - React, Tailwind, and code Playground

by Satpal Singh

HTML

<script src="javascript"></script>
<script src="knockout"></script>
<div>
<table class="students">
      <thead>
          <tr>
              <th>Name</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
					<span class='span' id ="nameSpan">elvis</span>
				</td>          			  		  
          </tr>
      </tbody>
  </table>  
</div>

JavaScript

$(document).ready(function(){
	var focusInName = '';
	var focusOutName = '';
	$(function () {
		$(document).on("click", ".span", function () {
			focusInName = $(this).html();
			var input = $('<input />', {
				'type': 'text',
					'name': 'aname',
					'value': $(this).html(),
					'class': 'input'
			});
			
			$(this).parent().append(input);
			$(this).remove();
			input.focus();
			alert(focusInName);
		});

		$(document).on('blur', ".input", function () {
			focusOutName = $(this).val();
			var span = $(
				'<span />', {
				'class': 'span',
					'html': $(this).val()
			});
			
			$(this).parent().append(span);
			$(this).remove();        
			alert(focusOutName);
		});
	});
});