Показать сообщение отдельно
  #11 (permalink)  
Старый 21.10.2019, 16:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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>


ЕЩЁ Добавил пример стиля для редактируемой ячейки.

Последний раз редактировалось Malleys, 21.10.2019 в 16:59.
Ответить с цитированием