JSFiddle - React, Tailwind, and code Playground

by Yaroslav Mozghovyi

HTML

<!DOCTYPE html>
<title>Test task 1</title>
<body>
  <!-- <div id="delColumn" class="del" onclick="appendColumn">
      <div id="addColumnChild"><b>–</b></div>
    </div>
     <div id="delRow" class="del" onclick="appendRow()">
      <div id="delRowChild"><b>–</b></div>
    </div>-->

  <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="addColumn" class="add">
    <div id="addColumnChild"><b>+</b></div>
  </div>
  <div id="addRow" class="add">
    <div id="addRowChild"><b>+</b></div>
  </div>

CSS

#canvas {
  align-content: center;
  height: 1000px;
}

#my-table {
  margin: 0 -2px -2px 0;
  border: #FFF;
  border: 1px solid rgb(72, 170, 230);
  display: inline-block;
}

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 {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

.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: 52px;
  width: 52px;
  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;
}

#delColumn {
  display: inline-block;
  vertical-align: top;
  margin: 2px 0 0 0;
}

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

#delColumnChild {
  line-height: 50px;
}

#delRow {
  vertical-align: left;
  margin: 0 0 0 2px;
}

#delRowChild {
  line-height: 50px;
}

JavaScript

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

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