Editarea în grup de elemente în JavaScript

Să presupunem că acum avem nu un paragraf, ci mai multe:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Să facem astfel încât la click pe orice paragraf să apară un câmp de introducere pentru editare.

De fapt, această sarcină nu reprezintă o dificultate pentru noi, deoarece aproape tot codul a fost obținut de noi în lecția precedentă.

Pentru a rezolva sarcina noastră, vom rula pur și simplu o buclă prin paragrafe și în buclă vom folosi codul lecției precedente (acest cod nici măcar nu va trebui modificat):

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

Este dat tag-ul ul. Faceți astfel încât la click pe orice li să apară în ea un câmp de introducere, cu ajutorul căruia se va putea edita textul acestei li.

Este dat un tabel HTML. Faceți astfel încât la click pe orice celulă să apară în ea un câmp de introducere pentru editarea textului acelei celule.