Сообщение от Ruru
|
Там где не заполнены нам нужно написать число от 1 до 9
|
Добавил, что редактировать можно только те ячейки, которые не заполнены изначально!
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid #ddd;
padding: 6px;
min-width: 16px;
text-align: center;
}
td[contenteditable] {
box-shadow: inset 0 0 100px aliceblue;
}
</style>
<table>
<tr><td>1</td><td>2</td><td></td></tr>
<tr><td>4</td><td></td><td>6</td></tr>
<tr><td></td><td></td><td>9</td></tr>
</table>
<script>
for(const cell of document.querySelectorAll("td:empty")) {
cell.tabIndex = 0;
cell.contentEditable = true;
cell.dataset.value = cell.textContent;
}
document.addEventListener("input", ({ target }) => {
let value = target.textContent.replace(target.dataset.value, "");
value = value || target.textContent;
value = value.replace(/[^1-9]/g, "").slice(0, 1) || target.dataset.value;
value = target.textContent === "" ? "" : value;
target.textContent =
target.dataset.value =
value;
});
</script>
ЕЩЁ Добавил пример стиля для редактируемой ячейки.