$('.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');  

});

​

var timer;

$(document).on('mouseleave','.my-table',function(){ 

   timer = setTimeout(function() {

     $('.del-column-td').addClass('hide');

     $('.del-row-td').addClass('hide');

   }, 1000);  

});

​

$(document).on('mouseover','.del-column-td',function(){

  clearTimeout(timer);

});

$(document).on('mouseleave','.del-column-td',function(){  

  $('.del-column-td').addClass('hide');

});

​

$(document).on('mouseover','.del-row-td',function(){

  clearTimeout(timer);

});

$(document).on('mouseleave','.del-row-td',function(){ 

   $('.del-row-td').addClass('hide');

});

​