JSFiddle - React, Tailwind, and code Playground
HTML
<button id='delrow'>Удалить строку</button>
<button id='delcell'>Удалить столбец</button>
<button id='addcell'>Добавить столбец</button>
<button id='addrow'>Добавить строку</button>
<button id='editTd'>Редактировать</button>
<button id='saveTd'>Сохранить</button>
<table id="table">
<tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
</tr>
<tr> <td>2</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>3</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>4</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>5</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>6</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>7</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>8</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> <td>9</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr> ...
CSS
.active{
color:white;
background:blue;
}
#table td {
width:50px;
border: 2px solid black;
}
JavaScript
$(function(){
$('#table').click(function(event){
var $cell=$(event.target).parents('td').andSelf().filter('td');
if( $cell.length>0){
$('#table td').removeClass('active');
$cell.addClass('active');
}
});
$('#delrow').click(function(event){
var $cell=$('#table td.active');
if($cell.length==1){
$cell.parents('tr:eq(0)').remove();
}
});
$('#delcell').click(function(event){
var $cell=$('#table td.active');
if($cell.length==1){
var cnt=$cell.index()+1;
$('#table tr td:nth-child('+cnt+')').remove();
/*$('#table tr').each(function(){
$('td',this).eq(cnt).remove();
});*/
}
});
$('#addcell').click(function(event){
var $cell=$('#table td.active');
if($cell.length==1){
var cnt=$cell.prevAll('td').length;
$('#table tr').each(function(){
$('td',this).eq(cnt).after('<td>');
});
}
});
$('#addrow').click(function(event){
var $cell=$('#table td.active');
if($cell.length==1){
var cnt=$cell.parent().prevAll('tr').length;
var $myTr=$('#table tr').eq(cnt);
$myTr.before($myTr.clone());
}
});
$('#editTd').click(function(){
var
$cell=$('td.active'),
text=$cell.text();
$cell.empty().append('<textarea>'+text+'</textarea>');
});
$('#saveTd').click(function(){
var
$cell=$('td.active'),
text=$cell.children().val();
$cell.empty().append(text);
});
});