JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<table>
  <tr id="view_1" class="view">
    <td>val1_1</td>
    <td>val2_1</td>
    <td>val3_1</td>
  </tr>
  <tr id="edit_1" style="display:none" class="edit">
    <td><input class="inputCls" id="edit1_1" type="text" value="val1_1"/></td>
    <td><input class="inputCls" id="edit2_1" type="text" value="val1_2"/></td>
    <td><input class="inputCls" id="edit3_1" type="text" value="val1_3"/></td>
  </tr>
  <tr id="view_2" class="view">
    <td>val1_2</td>
    <td>val2_2</td>
    <td>val3_2</td>
  </tr>
  <tr id="edit_2" style="display:none" class="edit">
    <td><input class="inputCls" id="edit1_2" type="text" value="val1_2"/></td>
    <td><input class="inputCls" id="edit2_2" type="text" value="val2_2"/></td>
    <td><input class="inputCls" id="edit3_2" type="text" value="val3_2"/></td>
  </tr>
</table>

JavaScript

$(document).ready(
    function()
    {
      var activeElem;

      $( ".view" ).on( "click", function() {
        var elemId = $(this).attr('id');
        var splitId = elemId.split( "_" );
        var id = splitId[1];
      
        var editElemId = "#edit_" + id;
        
        $( $(this) ).hide();
        $( editElemId ).show();
        $( editElemId ).find( "#edit2_" + id ).focus();
      });
      $( ".inputCls" ).on( "blur", function() {
        var elemId = $(this).attr('id');
        var splitId = elemId.split( "_" );
        var id = splitId[1];

        var thisTr = $(this).closest('tr');

        if( thisTr.find( "#" + activeElem.attr( "id" ) ).length === 0 ) {
          var viewTrId = "#view_" + id;
          
          thisTr.hide();
          $( viewTrId ).show();
        }
      });

      $(document).mousedown(function(e) {
        activeElem = $(e.target);
      });
    }
  );