<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="film-form">
<label for="title">Название:</label><br />
<input type="text" id="title" name="title" /><br />
<label for="genre">Жанр:</label><br />
<input type="text" id="genre" name="genre" /><br />
<label for="releaseYear">Год:</label><br />
<input type="text" id="releaseYear" name="releaseYear" /><br />
<input type="checkbox" id="isWatched" name="isWatched" />
<label for="isWatched">Успели посмотреть?</label><br />
<!-- <input type="submit" value="Submit"> -->
<button type="submit">Submit</button>
</form>
<table id="film-table">
<thead>
<tr>
<th>Название</th>
<th>Жанр</th>
<th>Год</th>
<th>Успели посмотреть?</th>
<th>Действие</th>
</tr>
</thead>
<tbody id="film-tbody">
<!-- Rows will be inserted here -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
const form = document.querySelector('#film-form');
const tbody = document.querySelector('#film-tbody');
function getFilms() {
return JSON.parse(localStorage.getItem('films')) || [];
}
function setFilms(films) {
localStorage.setItem('films', JSON.stringify(films));
}
function renderTable() {
const films = getFilms();
tbody.innerHTML = '';
films.forEach(film => {
const row = document.createElement('tr');
row.dataset.id = film.id;
row.innerHTML = `
<td>${film.title}</td>
<td class="genre">
<span id="SpanGenre">${film.genre}</span>
<input id="InputGenre">
</td>
<td id="releaseYear">${film.releaseYear}</td>
<td id="isWatched">${film.isWatched ? "Да" : "Нет"}</td>
<td>
<button class="Edit">Редактировать</button>
<button class="Update">Обновить</button>
<button class="delete">Удалить</button>
</td>
`;
tbody.appendChild(row);
});
}
function addFilmToLocalStorage(film) {
const films = getFilms();
film.id = Date.now();
films.push(film);
setFilms(films);
renderTable();
}
function handleFormSubmit(e) {
e.preventDefault();
const title = document.querySelector('#title').value;
const genre = document.querySelector('#genre').value;
const releaseYear = document.querySelector('#releaseYear').value;
const isWatched = document.querySelector('#isWatched').checked;
addFilmToLocalStorage({ title, genre, releaseYear, isWatched });
form.reset();
}
tbody.addEventListener('click', e => {
const target = e.target;
if (target.classList.contains('delete')) {
const row = target.closest('tr');
const id = Number(row.dataset.id);
let films = getFilms();
films = films.filter(f => f.id !== id);
setFilms(films);
renderTable();
}
});
tbody.addEventListener('click', e => {
const target = e.target;
const SpanGenre = document.querySelector('#SpanGenre');
const InputGenre = document.querySelector('#InputGenre');
const Edit = document.querySelector('.Edit');
const Update = document.querySelector('.Update');
if (target.classList.contains('Edit')) {
Edit.style.display = "none";
Update.style.display = "inline-block";
SpanGenre.style.display = 'none';
InputGenre.style.display = 'inline-block';
} else if (target.classList.contains('Update')) {
SpanGenre.textContent = InputGenre.value;
Edit.style.display = "inline-block";
Update.style.display = "none";
SpanGenre.style.display = 'inline-block';
InputGenre.style.display = 'none';
}
});
form.addEventListener('submit', handleFormSubmit);
renderTable();
Мне нужно, чтобы поля можно было редактировать и сохранять в них новую информацию по нажатию кнопки Редактировать и Обновить. А так же, чтобы эта информация отправлялась в localStorage.
6 часов пытаюсь это сделать и не выходит.
Подскажите заодно, это сложная задача?
Плюс помогите её решить.
Благодарю!
