Käytännön harjoitukset elementtien muuttamisesta JavaScriptillä

Annettu taulukko. Näytä sen elementit listana ul.

Muokkaa edellistä tehtävää siten, että mihin tahansa li:hen klikkaamalla siinä näkyy input-kenttä, jolla sitä voidaan muokata.

Muokkaa edellistä tehtävää siten, että listan alla on input-kenttä, jolla voidaan lisätä uusi elementti listan loppuun ul. Varmista, että uusia li-elementtejä voidaan myös muokata.

Muokkaa edellistä tehtävää siten, että jokaisen li-elementin lopussa on linkki 'poista', jolla voidaan poistaa tämä li ul-listasta.

Muokkaa edellistä tehtävää siten, että jokaisen li-elementin lopussa on myös linkki 'yliviivaa', jolla voidaan yliviivata tämän tagin li teksti.

Objektitaulukko ja taulukko

Annettu seuraava työntekijöiden taulukko:

let employees = [
	{name: 'employee1', age: 30, salary: 400},
	{name: 'employee2', age: 31, salary: 500},
	{name: 'employee3', age: 32, salary: 600},
];

Näytä nämä työntekijät HTML-taulukossa.

Lisää luodun taulukon soluille mahdollisuus muokata niitä.

Lisää taulukkoon uusi sarake, jossa on linkki rivin poistamiseen taulukosta.

Tee taulukon alle 3 input-kenttää ja painike uuden työntekijän lisäämiseksi. Anna input-kenttiin nimi, ikä ja palkka, ja painiketta klikkaamalla uusi työntekijä lisätään taulukkoon. Toteuta solujen muokkaus vasta lisätyille työntekijöille.

Objektitaulukko ja lista

Annettu seuraava työntekijöiden taulukko:

let employees = [
	{name: 'employee1', age: 30, salary: 400},
	{name: 'employee2', age: 31, salary: 500},
	{name: 'employee3', age: 32, salary: 600},
];

Näytä jokainen työntekijä omassa li-tagissaan ul-tagissa.

Tee niin, että nimeen, ikään tai palkkaan klikkaamalla näkyy input-kenttä kyseisen kentän muokkaamiseksi.

Lisää jokaisen li-tagin loppuun linkki tämän li:n poistamiseksi listasta.

Tee listan alle lomake uuden työntekijän lisäämiseksi.