JSFiddle - React, Tailwind, and code Playground

by Dominic D

HTML

<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Shahid</td>
      <td>[email protected]</td>
      <td>012-234-2432</td>
    </tr>
  </tbody>
</table>

<a href='http://ssiddique.info'> ssiddique </a>

JavaScript

$(function() {
  $("td").dblclick(function() {
    var OriginalContent = $(this).text();
    $(this).addClass("cellEditing");
    $(this).html("<input type='text' value='" + OriginalContent + "' />");
    $(this).children().first().focus();
    $(this).children().first().keypress(function(e) {
      if (e.which == 13) {
        var newContent = $(this).val();
        $(this).parent().text(newContent);
        $(this).parent().removeClass("cellEditing");
      }
    });
    $(this).children().first().blur(function() {
      $(this).parent().text(OriginalContent);
      $(this).parent().removeClass("cellEditing");
    });
    $(this).find('input').dblclick(function(e) {
      e.stopPropagation();
    });
  });
});