JSFiddle - React, Tailwind, and code Playground

by D An

HTML

<div class="main">
    <div class="content">
        <table>   
          <thead>
            <tr>
              <th>Name</th>
              <th>Date</th>
              <th>Email</th>
              <th>Address</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td class="name">Doe, John</td>
              <td class="data">Sample Data</td>
              <td class="edit">edit</td>
              <td class="trash">delete</td>
            </tr>
            <tr>
              <td class="name">Smith, Jane</td>
              <td class="data">Another Sample</td>
              <td class="edit">edit</td>
              <td class="trash">delete</td>
            </tr>
            <tr>
              <td class="name">T, Mister</td>
              <td class="data">Samples are Best in Threes.</td>
              <td class="edit">edit</td>
              <td class="trash">delete</td>
            </tr>        
          </tbody>
        </table>
      </div>      
      <div class="option"></div>
</div>

CSS

.main{
  display:flex
}
.content{
  max-width:700px;
}

thead{
  background:#f2f2f2;
}

th,td{
  padding:10px;
}
tbody{
  background:#f5f5f5
}
input{
  outline:none;
  border:none;
  padding:6px;
  background:none;
  width:92%;
}
tr:hover{
  background:red !important;
}
input:focus{
  border:solid 1px #bebebe
}

.option{
  visibility:hidden
}
.option:hover{
  visibility: visible;
}

.option.show{
  visibility: visible;
}
.add{
  display:inline-block;
  width:50px;
  background:#f5f5f5;
  padding:10px;
  margin:0 1px;
}

JavaScript

var options = '<div class="add delete">Delele</div>'+
          '<div class="add insert_before">Add	&uarr;</div>'+
          '<div class="add insert_after">Add &darr;</div>'
$('.option').append(options);

$('td').wrapInner('<input type="text"/>');

$('tr').mouseleave(function(){
   obj = $(this)
});

$('.delete').click(function(){
   obj.remove()
});

row = '<tr>'+
      '<td class="name"></td>'+
      '<td class="data"></td>'+
      '<td class="edit"></td>'+
      '<td class="trash"></td>'+
      '</tr>'

$('.add.insert_before').click(function(){
   obj.before(row);
   obj.prev().children('td').wrapInner('<input type="text"/>');
});


$('tbody').on('mouseover mouseout', 'tr', function(){
     kc = $(this).position().top;
     $('.option').toggleClass('show').css({'margin-top':kc});
});