Rediģēšana elementu grupā JavaScript

Tagad pieņemsim, ka mums ir nevis viens rindkopa, bet daudz:

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

Iestatīsim tā, lai, uzklikšķinot uz jebkuras rindkopas, tajā parādās ievades lauks rediģēšanai.

Patiesībā šis uzdevums mums nerada grūtības, jo gandrīz viss kods mums jau tika iegūts iepriekšējā nodarbībā.

Lai atrisinātu mūsu uzdevumu, vienkārši palaidīsim ciklu pa rindkopām un cilpā izmantosim kodu no iepriekšējās nodarbības (šis kods pat nebūs jāmaina):

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

Ir dots tags ul. Iestatiet tā, lai, uzklikšķinot uz jebkuras li, tajā parādītos ievades lauks, ar kuru varēs rediģēt šīs li tekstu.

Ir dota HTML tabula. Iestatiet tā, lai, uzklikšķinot uz jebkuras šūnas, tajā parādītos ievades lauks šīs šūnas teksta rediģēšanai.