Επεξεργασία σε ομάδα στοιχείων σε JavaScript

Ας υποθέσουμε τώρα ότι δεν έχουμε μία παράγραφο, αλλά πολλές:

<p>κείμενο1</p>
<p>κείμενο2</p>
<p>κείμενο3</p>

Ας κάνουμε έτσι ώστε με κλικ σε οποιαδήποτε παράγραφο να εμφανίζεται ένα πεδίο εισαγωγής για επεξεργασία.

Στην πραγματικότητα, αυτό το πρόβλημα δεν μας παρουσιάζει δυσκολία, καθώς σχεδόν όλος ο κώδικας είχε ληφθεί από εμάς στο προηγούμενο μάθημα.

Για την επίλυση του προβλήματός μας απλώς θα εκτελέσουμε έναν βρόγχο στις παραγράφους και στον βρόγχο θα χρησιμοποιήσουμε τον κώδικα του προηγούμενου μαθήματος (αυτός ο κώδικας δεν χρειάζεται καν να αλλάξει):

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

Δίνεται η ετικέτα ul. Κάντε έτσι ώστε με κλικ σε οποιοδήποτε li να εμφανίζεται ένα πεδίο εισαγωγής, με το οποίο θα μπορείτε να επεξεργαστείτε το κείμενο αυτού του li.

Δίνεται ένας πίνακας HTML. Κάντε έτσι ώστε με κλικ σε οποιοδήποτε κελί να εμφανίζεται ένα πεδίο εισαγωγής για την επεξεργασία του κειμένου αυτού του κελιού.