Вы можете сделать это так, используя each()
, чтобы выбрать все активные ячейки, клонировать их и вставить клон до или после выбранных ячеек.
$('button').attr('disabled', true);
$(document).on('click', "table#myTable tr td", function() {
let index = $(this).index();
$('#myTable tr').removeClass('tr-active');
$('#myTable tr td').removeClass('td-active');
$(this).closest('tr').addClass('tr-active');
$(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active');
$('button').attr('disabled', false);
$('p').css('visibility', 'hidden');
});
$(document).on('click', '#addRowBefore', function() {
var selectedRow = $('table#myTable tr.tr-active');
$(selectedRow).clone().insertBefore('table#myTable tr.tr-active');
$('table#myTable tr').removeClass('tr-active');
$('table#myTable tr td').removeClass('td-active');
$('button').attr('disabled', true);
$('p').css('visibility', 'visible');
});
$(document).on('click', '#addRowAfter', function() {
var selectedRow = $('table#myTable tr.tr-active');
$(selectedRow).clone().insertAfter('table#myTable tr.tr-active');
$('table#myTable tr').removeClass('tr-active');
$('table#myTable tr td').removeClass('td-active');
$('button').attr('disabled', true);
$('p').css('visibility', 'visible');
});
$(document).on('click', '#addColumnBefore', function() {
$('table#myTable td.td-active').each(function() {
$(this).clone().insertBefore($(this));
});
$('table#myTable tr').removeClass('tr-active');
$('table#myTable tr td').removeClass('td-active');
$('button').attr('disabled', true);
$('p').css('visibility', 'visible');
});
$(document).on('click', '#addColumnAfter', function() {
$('table#myTable td.td-active').each(function() {
$(this).clone().insertAfter($(this));
});
$('table#myTable tr').removeClass('tr-active');
$('table#myTable tr td').removeClass('td-active');
$('button').attr('disabled', true);
$('p').css('visibility', 'visible');
});
body{font-family:verdana;font-size:13px;}
table, td{border:1px solid #000;border-collapse:collapse;}
td{padding:5px;min-width:60px;}
.buttons{margin-top:20px;}
td.td-active{background-color:#ffcbcb !important;}
tr.tr-active td{background-color:#ccc;}
p{background-color:#ffbebe;padding:5px;border:1px solid #bb4040;}
button {background-color: #471173;border: 1px solid #2d0150;padding: 5px 10px;margin-right: 5px;color: #ffffff;cursor:pointer;}
button:disabled{background-color: #e8e8e8;border: 1px solid #bfbfbf;color: #9a9a9a;cursor:not-allowed}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td>R1 C1</td>
<td>R1 C</td>
<td>R1 C3</td>
<td>R1 C4</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>R2 C4</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>R3 C4</td>
</tr>
</table>
<br>
<p>Please select / click on any cell to enable actions.</p>
<button id="addRowBefore">Insert row before</button>
<button id="addRowAfter">Insert row after</button>
<br>
<br>
<button id="addColumnBefore">Insert column before</button>
<button id="addColumnAfter">Insert column after</button>