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

{
	const div = document.querySelector('.working_div');
	const input = document.querySelector('input');
	const modal = document.querySelector('.modal');
	const cancel = document.getElementById('cancel');
	const save = document.getElementById('save');
	const table = createCalendar("calendar", 2019, 6);
	let target;
	table.addEventListener('click', openModal);
	save.addEventListener('click', saveModal);
	cancel.addEventListener('click', returnTable);

	function createCalendar(id, year, month) {
		const table = document.createElement('table');
		const header = document.createElement('tr');
		const daysOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
		const daysInMonth = new Date(year, month, 0).getDate();
		for (const day of daysOfWeek)
			header.insertAdjacentHTML('beforeend', `<th>${day}</th>`)
		table.append(header);
		let firstDay = (new Date(year, month - 1).getDay() + 6) % 7;
		let nextDayToAdd = 1 - firstDay;
		while (nextDayToAdd <= daysInMonth) {
			const week = document.createElement('tr');
			for (let i = 0; i < 7; i++) {
				const day = document.createElement('td');
				if (nextDayToAdd > 0 && nextDayToAdd <= daysInMonth)
					day.innerHTML = nextDayToAdd;
				nextDayToAdd++;
				week.append(day);
			}
			table.append(week);
		}
		div.append(table);
		return table;
	}

	function openModal(event) {
		target = event.target;
		const td = target.closest('td');
		input.value = '';
		if (target.tagName != 'TD')
			return;
		if (!td)
			return;
		table.style.display = 'none';
		modal.style.display = 'block';
		document.body.style.backgroundColor = '#93978F';
	}

	function returnTable() {
		table.style.display = 'inline';
		modal.style.display = 'none';
		document.body.style.backgroundColor = 'white';
	}

	function saveModal() {
		event.preventDefault()
		table.style.display = 'inline';
		modal.style.display = 'none';
		document.body.style.backgroundColor = 'white';
		let closestTd = target.closest('TD');
		let p = document.createElement('p');
		p.textContent = `${input.value}`;
		closestTd.append(p);
	}
}


Код так и просится, чтобы был класс 😀
Ответить с цитированием