JSFiddle - React, Tailwind, and code Playground

by Yaroslav Mozghovyi

HTML

<!DOCTYPE html>
<title>Test task 1</title>

<body>
  <div class="hoverstate delColumn">
    <table class="del-column">
      <tr>
        <td class="del-column-td del hide"><b>-</b></td>
        <td class="del-column-td del hide"><b>-</b></td>
        <td class="del-column-td del hide"><b>-</b></td>
        <td class="del-column-td del hide"><b>-</b></td>

      </tr>
    </table>
  </div>
  <div class="hoverstate dell-row">
    <table class="table-del">
      <tr class="del-row-tr">
        <td class="del-row-td del hide"><b>-</b></td>
      </tr>
      <tr>
        <td class="del-row-td del hide"><b>-</b></td>
      </tr>
      <tr>
        <td class="del-row-td del hide"><b>-</b></td>
      </tr>
      <tr>
        <td class="del-row-td del hide"><b>-</b></td>
      </tr>
    </table>
  </div>

  <div class="canvas">

    <table>
      <tr>
    </table>
    <table class="my-table">
      <tr class="default-row">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    <div class="addRow add">
      <div class="addRowChild"><b>+</b></div>
    </div>

  </div>

  </div>


  <div class="addColumn add">
    <div class="addColumnChild"><b>+</b></div>
  </div>

CSS

/* .hoverstate {
  visibility: hidden; 
} */

.canvas {
  float: left;
}

.delColumn {
  margin: 0 0 0 55px;
  width: auto;
}

.dell-row {
  float: left;
  height: 100%;
}

.my-table {
  margin: -5px 2px 2px -1px;
  border: #FFF;
  border: 1px solid rgb(72, 170, 230);
}

tr {
  background: rgb(72, 170, 230);
}

td {
  width: 50px;
  height: 50px;
}

.add {
  height: 52px;
  width: 52px;
  background: rgb(243, 165, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.addColumn {
  margin: 1px 0 0 0;
  vertical-align: top;
  float: left;
}

.add:hover {
  background: rgb(246, 192, 82);
}

.addColumnChild {
  line-height: 50px;
}

.addRow {
  vertical-align: bottom;
  margin: 0 0 0 2px;
}

.addRowChild {
  line-height: 50px;
}

.del {
  height: 50px;
  width: 50px;
  background: rgb(178, 0, 0);
  cursor: pointer;
  color: #FFF;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.del:hover {
  background: rgb(202, 76, 73);
}

.delColumnChild {
  line-height: 50px;
}

.delRow {
  margin: 0 0 0 2px;
}

.delRowChild {
  line-height: 50px;
}

.hide {
  visibility: hidden;
}

JavaScript

$('.addColumnChild').click(function() {
  $('.my-table tr').each(function() {
    $(this).append(`<td></td>`);
  })
});

$('.addColumnChild').click(function() {
  $('.del-column tr').each(function() {
    $('.del-column tr').append(`<td class="del del-column-td">${$('.del-column-td').html()}</td>`);
  })
});

$('.addRowChild').click(function() {
  $('.my-table tbody').append(`<tr>${$('.default-row').html()}</tr>`);
});

$('.addRowChild').click(function() {
  $('.table-del tbody').append(`<tr>${$('.del-row-tr').html()}</tr>`);
});

$('.table-del').on('click', 'tr', function() {
  var trIndex = $("tr", $(this).closest("table")).index(this);
  $($('.my-table tr')[trIndex]).remove()
  $(this).remove();
})

$('.del-column').on('click', 'td', function() {
  var index = this.cellIndex;

  $('.my-table').find('tr').each(function() {
    this.removeChild(this.cells[index]);
  });
  $(this).remove();
});
$(document).on('mouseover','.my-table tr td',function(){
	 var columnDelIndex = $("td", $(this).closest("table")).index(this);
   var col_num = $('.my-table tr:first > td').length;   
   $($('.del-column-td')).addClass('hide');
   $($('.del-row-td')).addClass('hide');  
   $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
   $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide');  
});

$(document).on('mouseleave','.my-table',function(){	
   setTimeout(function(){$($('.del-column-td')).addClass('hide');
   $($('.del-row-td')).addClass('hide');},1000);  
});

$(document).on('mouseover','.del-column-td',function(){
	 $(this).removeClass("hide");
   });
   
$(document).on('mouseleave','.del-column-td',function(){	
   $('.del-column-td').addClass('hide');
    
});

$(document).on('mouseover','.del-row-td',function(){
	 $(this).removeClass("hide");
   });
   
$(document).on('mouseleave','.del-row-td',function(){	
   $('.del-row-td').addClass('hide');
    
});


/*
    var mousePosition = { 'x': 0, 'y': 0 };

    $(document).bind(...