Bearbeitung in einer Gruppe von Elementen in JavaScript

Nehmen wir nun an, wir haben nicht einen Absatz, sondern viele:

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

Lassen Sie uns es so einrichten, dass bei einem Klick auf einen beliebigen Absatz ein Input zur Bearbeitung erscheint.

Eigentlich stellt diese Aufgabe für uns keine Schwierigkeit dar, da fast der gesamte Code von uns in der vorherigen Lektion erhalten wurde.

Um unsere Aufgabe zu lösen, starten wir einfach eine Schleife über die Absätze und verwenden in der Schleife den Code der vorherigen Lektion (dieser Code muss nicht einmal geändert werden):

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);
	});
}

Gegeben ist das Tag ul. Sorgen Sie dafür, dass bei einem Klick auf ein beliebiges li ein Input erscheint, mit dem der Text dieses li bearbeitet werden kann.

Gegeben ist eine HTML-Tabelle. Sorgen Sie dafür, dass bei einem Klick auf eine beliebige Zelle ein Input zur Bearbeitung des Textes dieser Zelle erscheint.