# Редактирование списка с помощью появляющейся формы

Пусть у нас есть список ul. В каждом пункте списка мы будем хранить имя и возраст пользователя. Давайте сделаем так, чтобы в конце каждой li появилась ссылка "редактировать". По нажатию на эту ссылку под ul должны появится кнопка и два инпута, в которых будет имя и возраст пользователя. Сделаем так, чтобы по нажатию на эту кнопку данные поредактировались, а инпуты и кнопка спрятались.

## Исходники кода

`<ul id="list"> <li> <span class="name">name1</span> <span class="age">age1</span> </li> <li> <span class="name">name2</span> <span class="age">age2</span> </li> <li> <span class="name">name3</span> <span class="age">age3</span> </li> <li> <span class="name">name4</span> <span class="age">age4</span> </li> <li> <span class="name">name5</span> <span class="age">age5</span> </li> </ul> <form id="form"> <input id="name"> <input id="age"> <input type="submit"> </form>` `#form { display: none; }` `var list = document.querySelector('#list'); var items = list.querySelectorAll('li'); var nameInput = document.querySelector('#name'); var ageInput = document.querySelector('#age'); var form = document.querySelector('#form'); var editLi = null; for (var i = 0; i < items.length; i++) { var link = document.createElement('a'); link.href = '#'; link.innerHTML = 'edit'; link.addEventListener('click', function() { var li = this.parentElement; editLi = li; nameInput.value = li.querySelector('.name').innerHTML; ageInput.value = li.querySelector('.age').innerHTML; form.style.display = 'block'; }); items[i].appendChild(link); } form.addEventListener('submit', function(event) { editLi.querySelector('.name').innerHTML = nameInput.value; editLi.querySelector('.age').innerHTML = ageInput.value; form.style.display = 'none'; event.preventDefault(); });`

## Смотрите также

- видео
  редактирование таблицы по клику JavaScript

← →
↑