JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/fronteed/iCheck/master/icheck.js"></script>
<link rel="stylesheet" href="https://rawgit.com/fronteed/iCheck/master/skins/flat/blue.css">
<script src="https://rawgit.com/fronteed/iCheck/master/skins/flat/[email protected]"></script>
<!-- Standard button -->
<button type="button" class="btn btn-danger">Edit</button>

<table class="table table-bordered" style="margin-top:20px;">
      <thead>
        <tr>
          <th></th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2">1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td>Mark</td>
          <td>Otto</td>
          <td>@TwBootstrap</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry </td>
          <td> the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

JavaScript

$("html").on('click', '.btn-danger', function() {
    
       var editMode = $(this).hasClass('edit-mode'),
           columns  = $('.table th');
    
    if (!editMode){
        
        $(this).html('Save').addClass('edit-mode');
        
        columns.each(function(){
            
            var txt = $(this).text();
            var input = $('<input type="text">');
            input.val(txt);
            $(this).html(input);
    
        });
        
    } else {
        
        $(this).html('Edit').removeClass('edit-mode');
        
        columns.each(function(){
            
            var newName = $(this).find('input').eq(0).val();
            $(this).html(newName);
        
        });
        
    }
   
}) ;