JSFiddle - React, Tailwind, and code Playground
HTML
<button id='addrow'>Добавить строку</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> <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:red;
}
#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');
}
});
//редактирование
$('#table').dblclick(function(event){
var $cell=$(event.target).parents('td').andSelf().filter('td');
if( $cell.length>0){
$('#table td').removeClass('active');
$cell.addClass('active');
var
$cell=$('td.active'),
text=$cell.text();
$cell.empty().append('<textarea>'+text+'</textarea>');
}
});
<!-- добавить строку -->
$('#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);
});
});