JSFiddle - React, Tailwind, and code Playground
HTML
<button id='delrow'>delrow</button>
<button id='delcell'>delcell</button>
<button id='addcell'>addcell</button>
<button id='addrow'>addrow</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> <td>10</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:30px;
border: 1px solid black;
}
JavaScript
$('#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.prevAll('td').length;
$('#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());
}
})