Пусть у нас есть список 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();
});