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

Задание 1

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

Задание 2

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

Задание 3

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.

Задание 4

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

Задание 5

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

Задание 6

Annettu seuraava työntekijöiden taulukko:

javascriptlet 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.

Задание 7

Lisää luodun taulukon soluille mahdollisuus muokata niitä.

Задание 8

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

Задание 9

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.

Задание 10

Annettu seuraava työntekijöiden taulukko:

javascriptlet 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.

Задание 11

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

Задание 12

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

Задание 13

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