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"><b>-</b></td>
        <td id="del-column-td" class="del"><b>-</b></td>
        <td id="del-column-td" class="del"><b>-</b></td>
        <td id="del-column-td" class="del"><b>-</b></td>

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

  <div id="canvas">

    <table>
      <tr>
    </table>
    <table id="my-table">
      <tr id="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 id="addRow" class="add">
      <div id="addRowChild"><b>+</b></div>
    </div>

  </div>

  </div>
  <div id="addColumn" class="add">
    <div id="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;
  position: absolute;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#addColumn {
  margin: 1px 0 0 0;
  vertical-align: top;
  display: inline;
}

.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;
}

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').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>`);
});

/* $('#my-table').hover(function() {  
  $('#dell-row').removeClass('hoverstate');
}, function() {
  $('#dell-row').addClass('hoverstate');
});

$('#my-table').hover(function() {  
  $('#delColumn').removeClass('hoverstate');
}, function() {
  $('#delColumn').addClass('hoverstate');
}); */