Πρακτική στην Τροποποίηση Στοιχείων σε JavaScript

Задание 1

Δίνεται ένας πίνακας. Εμφανίστε τα στοιχεία του ως μια λίστα ul.

Задание 2

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε με κλικ σε οποιοδήποτε li να εμφανίζεται ένα πεδίο εισαγωγής, με το οποίο θα μπορείτε να το επεξεργαστείτε.

Задание 3

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε κάτω από τη λίστα να υπάρχει ένα πεδίο εισαγωγής, με το οποίο θα μπορείτε να προσθέσετε ένα νέο στοιχείο στο τέλος της λίστας ul. Βεβαιωθείτε ότι τα νέα li μπορούν επίσης να επεξεργαστούν.

Задание 4

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε στο τέλος κάθε li να υπάρχει ένας σύνδεσμος 'διαγραφή', με τον οποίο θα μπορείτε να διαγράψετε αυτό το li από το ul.

Задание 5

Τροποποιήστε το προηγούμενο πρόβλημα έτσι ώστε στο τέλος κάθε li να υπάρχει επίσης ένας σύνδεσμος 'διάγραφη γραμμής', με τον οποίο θα μπορείτε να διαγράψετε το κείμενο αυτής της ετικέτας li.

Задание 6

Δίνεται ο ακόλουθος πίνακας με εργαζόμενους:

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

Εμφανίστε αυτούς τους εργαζόμενους σε έναν πίνακα HTML.

Задание 7

Προσθέστε τη δυνατότητα επεξεργασίας στα κελιά του πίνακα που δημιουργήσατε.

Задание 8

Προσθέστε στον πίνακα σας μια νέα στήλη με σύνδεσμο για διαγραφή της σειράς από τον πίνακα.

Задание 9

Τοποθετήστε κάτω από τον πίνακα 3 πεδία εισαγωγής και ένα κουμπί για την προσθήκη νέου εργαζομένου. Αφήστε στα πεδία εισαγωγής να εισάγονται όνομα, ηλικία και μισθός, και με πάτημα στο κουμπί ο νέος εργαζόμενος προστίθεται στον πίνακα. Υλοποιήστε την επεξεργασία κελιών για τους νεοπροσληφθέντες εργαζόμενους.

Задание 10

Δίνεται ο ακόλουθος πίνακας με εργαζόμενους:

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

Εμφανίστε στην οθόνη κάθε εργαζόμενο στο δικό του στοιχείο li της ετικέτας ul.

Задание 11

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

Задание 12

Προσθέστε στο τέλος κάθε ετικέτας li έναν σύνδεσμο για διαγραφή αυτού του li από τη λίστα.

Задание 13

Κάτω από τη λίστα δημιουργήστε μια φόρμα για προσθήκη νέου εργαζομένου.