JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1>
  <tr index=0>
    <td satir=0 sutun='0'>Johnson</td>
    <td satir=0 sutun='1'>London</td>
  </tr>
</table>

JavaScript

document.querySelector('table').addEventListener('click', function(evt) {
  var o= evt.target;

  if(o.tagName==='TD') {
    o.setAttribute('value', o.innerHTML);
    o.innerHTML= '<input type="text" value="'+o.innerHTML+'">' +
                 '<button class="save"  >Save  </button>' +
                 '<button class="cancel">Cancel</button>';
    
    o.querySelector('input').focus();
  }
  else if(o.className==='save') {
    o.parentNode.innerHTML= o.parentNode.querySelector('input').value;
  }
  else if(o.className==='cancel') {
    o.parentNode.innerHTML= o.parentNode.getAttribute('value');
  }
});