Αυτή η ανάρτηση ιστολογίου θα δείξει τη διαδικασία δημιουργίας ενός δυναμικού πίνακα σε JavaScript.
Πώς να δημιουργήσετε έναν πίνακα δυναμικά σε JavaScript;
Ας δούμε ένα παράδειγμα που εξηγεί πώς θα δημιουργηθεί ένας δυναμικός πίνακας σε JavaScript.
Παράδειγμα
Για να ξεκινήσετε, γράψτε τις ακόλουθες γραμμές σε ένα νέο έγγραφο HTML για να δημιουργήσετε μια φόρμα που λαμβάνει δεδομένα και στη συνέχεια τα εμφανίζει σε έναν πίνακα προσθέτοντάς τα δυναμικά:
< div id = 'myform' >
< h4 > Συμπληρώστε την παρακάτω φόρμα : h4 >
< επιγραφή > Ονομα : επιγραφή >
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'όνομα' >< br >< br >
< επιγραφή > Γένος : επιγραφή >
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'γένος' >< br >< br >
< επιγραφή > Ονομασία : επιγραφή >
< τύπος εισόδου = 'κείμενο' ταυτότητα = 'ονομασία' >< br >< br >
< επιγραφή > Συμμετοχή Ημερομηνία : επιγραφή >
< τύπος εισόδου = 'ημερομηνία' ταυτότητα = 'ημερομηνία' >< br >< br >
< αναγνωριστικό κουμπιού = 'Προσθήκη' αξία = 'Προσθήκη' > Προσθήκη δεδομένων στον πίνακα κουμπί >
div >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτα, δημιουργήστε μια επικεφαλίδα ' Συμπληρώστε την παρακάτω φόρμα: '.
- Δημιουργία πεδίων εισαγωγής για ' Ονομα », « Γένος », « Ονομασία ', και ' JoiningDate 'με καθορισμένο αναγνωριστικό' όνομα », « γένος », « ονομασία ', και ' ημερομηνία ” αντίστοιχα, για να πάρει τις τιμές εισόδου από τον χρήστη.
- Αυτά τα αναγνωριστικά χρησιμοποιούνται για τη λήψη της αναφοράς των στοιχείων στο JavaScript.
- Στη συνέχεια, δημιουργήστε ένα κουμπί με το ' στο κλικ ' ακίνητο που θα καλεί ' addTableRow() Συνάρτηση σε ένα αρχείο σεναρίου, για προσθήκη και εμφάνιση των δεδομένων σε έναν πίνακα:
Εδώ, στο αρχείο HTML, γράψτε αυτές τις γραμμές κώδικα για να δημιουργήσετε μια δομή πίνακα, όπου τα δεδομένα θα προστεθούν δυναμικά:
< div >
< h4 > Μητρώο Υπαλλήλων σι h4 >
< κέντρο >
< id πίνακα = 'Πίνακας Δεδομένων' σύνορο = '1' επένδυση κυψέλης = 'δύο' >
< tr >
< td >< σι > Ονομα σι td >
< td >< σι > Γένος σι td >
< td >< σι > Ονομασία σι td >
< td >< σι > Ημερομηνία Εγγραφής σι td >
tr >
τραπέζι >
κέντρο >
div >
Στον παραπάνω κώδικα:
- Δημιουργήστε έναν πίνακα με το αναγνωριστικό ' Δεδομένα πίνακα ” που θα χρησιμοποιηθεί στο αρχείο σεναρίου για να λάβετε την αναφορά αυτού του πίνακα και στη συνέχεια να προσθέσετε τα δεδομένα σε αυτό.
- Ο πίνακας περιέχει τέσσερις στήλες, ' Ονομα », « Γένος », « Ονομασία ', και ' Ημερομηνία Εγγραφής ' που θα αποθηκεύει δεδομένα σύμφωνα με τα ονόματα στηλών.
Η εκτέλεση του αρχείου HTML θα έχει ως αποτέλεσμα την ακόλουθη έξοδο του προγράμματος περιήγησης:
Ας προσθέσουμε λειτουργικότητα για τη δυναμική δημιουργία πινάκων χρησιμοποιώντας JavaScript. Στο αρχείο σεναρίου ή στην ετικέτα, χρησιμοποιήστε τον παρακάτω κώδικα που θα δημιουργήσει έναν πίνακα δυναμικά:
λειτουργία addTableRow ( ) {ήταν όνομα = έγγραφο. getElementById ( 'όνομα' ) ;
ήταν γένος = έγγραφο. getElementById ( 'γένος' ) ;
ήταν ονομασία = έγγραφο. getElementById ( 'ονομασία' ) ;
ήταν ημερομηνία = έγγραφο. getElementById ( 'ημερομηνία' ) ;
ήταν τραπέζι = έγγραφο. getElementById ( 'Πίνακας Δεδομένων' ) ;
ήταν rowCount = τραπέζι. σειρές . μήκος ;
ήταν σειρά = τραπέζι. εισαγωγήΣειράς ( rowCount ) ;
σειρά. insertCell ( 0 ) . innerHTML = όνομα. αξία ;
σειρά. insertCell ( 1 ) . innerHTML = γένος. αξία ;
σειρά. insertCell ( δύο ) . innerHTML = ονομασία. αξία ;
σειρά. insertCell ( 3 ) . innerHTML = ημερομηνία. αξία ;
}
Στο παραπάνω απόσπασμα:
- Πρώτα, ορίστε μια συνάρτηση ' addTableRow() ' που θα ενεργοποιήσει το συμβάν κλικ του κουμπιού HTML.
- Στη συνέχεια, λάβετε την αναφορά όλων των πεδίων εισαγωγής ένα προς ένα χρησιμοποιώντας τα αντίστοιχα αναγνωριστικά που έχουν εκχωρηθεί χρησιμοποιώντας το ' getelementById() ” και αποθηκεύστε τα σε μεταβλητές.
- Αυτές οι μεταβλητές θα χρησιμοποιηθούν για να λάβουν την τιμή των πεδίων εισαγωγής χρησιμοποιώντας το HTML ' αξία ιδιότητα ' και ορίστε τα στα μεμονωμένα κελιά του πίνακα χρησιμοποιώντας το ' innerHTML ” ιδιοκτησία.
- Προσθέστε σειρές σε έναν πίνακα χρησιμοποιώντας το ' πίνακας.σειρές.μήκος ” ιδιοκτησία και στη συνέχεια αποθηκεύστε αξίες σε αυτό.
Παραγωγή
Η παραπάνω έξοδος υποδεικνύει ότι ο δυναμικός πίνακας δημιουργήθηκε με επιτυχία προσθέτοντας δεδομένα σε μια φόρμα χρησιμοποιώντας JavaScript.
συμπέρασμα
Ο δυναμικός πίνακας δημιουργείται χρησιμοποιώντας τις διαφορετικές ιδιότητες HTML με προκαθορισμένες μεθόδους JavaScript. Πρώτα, δημιουργήστε μια φόρμα σε ένα αρχείο HTML και, στη συνέχεια, λάβετε την αναφορά των πεδίων χρησιμοποιώντας προκαθορισμένες μεθόδους JavaScript, όπως το ' getElementById() ' και στη συνέχεια ανακτήστε τις εισαγόμενες τιμές τους χρησιμοποιώντας το ' αξία ” ιδιοκτησία. Ορίστε αυτές τις τιμές στις αντίστοιχες στήλες ενός πίνακα χρησιμοποιώντας το ' innerHTML ” ιδιοκτησία. Αυτή η ανάρτηση ιστολογίου δείχνει τη διαδικασία δημιουργίας ενός δυναμικού πίνακα σε JavaScript.