JSFiddle - React, Tailwind, and code Playground
HTML
<table id="table" tabindex="0">
<tbody>
<tr>
<td><span>R1C1</span></td>
<td>R1C2</td>
</tr>
<tr>
<td>R2C1</td>
<td>R2C2</td>
</tr>
<tr>
<td>R3C1</td>
<td>R3C2</td>
</tr>
</tbody>
</table>
CSS
table, td {
border: 1px solid #ccc;
border-collapse: collapse;
padding: 2px;
outline: none;
}
JavaScript
window.onload = function () {
var selected,
selectCell = function (e) {
var cell = e.target,
range, selection;
if (cell.tagName.toLowerCase() !== 'td') {
while (cell = cell.parentElement) {
if (cell.tagName.toLowerCase() === 'td') {
break;
}
}
}
if (!cell || cell.tagName.toLowerCase() !== 'td') {
return;
}
if (selected) {
selected.style.backgroundColor = '';
}
cell.style.backgroundColor = '#ff0';
selected = cell;
},
beforeCopyCell = function (e) {
var range, selection;
if (!selected || !e.ctrlKey || e.which !== 67) {
return;
}
selected.focus();
selection = window.getSelection();
selection.removeAllRanges();
range = document.createRange();
range.selectNode(selected);
selection.addRange(range);
table.addEventListener('keyup', afterCopyCell);
},
afterCopyCell = function (e) {
selection = window.getSelection();
selection.removeAllRanges();
this.removeEventListener('keyup', afterCopyCell);
},
table = document.getElementById('table');
table.addEventListener('click', selectCell);
table.addEventListener('keydown', beforeCopyCell);
};