JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>cell 1</td>
    <td>cell 1</td>
    <td>cell 1</td>
  </tr>
    <tr>
    <td>cell 1</td>
    <td>cell 1</td>
    <td>cell 1</td>
  </tr>
</table>

CSS

* {font-family:Trebuchet MS;}
table {margin:10px;}
.xml_value { padding:20px; border:solid 1px #CCC; width:100px;}
.xml_value:hover { cursor:pointer; background-color:#eeeeee;}
.xml_data {width:80px; border:solid 1px #aaa; padding:4px;}

JavaScript

jQuery('td').addClass('xml_value');
jQuery('td.xml_value').click(function() {
	var jThis = jQuery(this);
  // Αν έχει ήδη textbox μέσα του να επιστρέψει
  if(jThis.find('input').length > 0) return;
  
	var data = jThis.text();
	// Αντικαθιστούμε το σκέτο text στο κελί με ένα textbox που περιέχει το ίδιο κείμενο
	jThis.html('<input type="text" class="xml_data" value="' + data + '" />');
	jThis.find('input.xml_data').focus();
  
	jQuery('input.xml_data').blur(function() {
		var jThis = jQuery(this);
		var jParent = jQuery(jThis.parent());
		
		var data = jThis.val();
	        // Αντικαθιστούμε το textbox με το νέο κείμενο που το ίδιο περιέχει. 
		jParent.html(data);
	});
});