Συνάρτηση για Δημιουργία Πινάκων HTML σε JavaScript
Ας φτιάξουμε τώρα τη συνάρτηση createTable,
που θα δημιουργεί έναν πίνακα με δεδομένο
μέγεθος και θα τον προσθέτει στο τέλος ενός δεδομένου στοιχείου.
Ας πάρει η συνάρτησή μας ως πρώτη παράμετρο τον αριθμό των σειρών, ως δεύτερη παράμετρο - τον αριθμό των στηλών, και ως τρίτη - μια αναφορά στο DOM στοιχείο, μέσα στο οποίο θα δημιουργείται ο πίνακας μας.
Ας δούμε πώς θα χρησιμοποιούσαμε τη περιγραφόμενη συνάρτηση, όταν θα είχε δημιουργηθεί. Ας υποθέσουμε, για παράδειγμα, ότι μας δίνεται αυτό το div:
<div id="elem"></div>
Ας φτιάξουμε μέσα σε αυτό το div έναν πίνακα
3 επί 4:
let div = document.querySelector('#elem');
createTable(3, 4, div);
Ας υποθέσουμε τώρα ότι μας δίνονται δύο div:
<div id="elem1"></div>
<div id="elem2"></div>
Ας φτιάξουμε τον δικό μας πίνακα σε κάθε ένα από αυτά τα div:
let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);
let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);
Για να είναι οι πίνακες που δημιουργούνται αμέσως ορατοί, μπορούμε να προσθέσουμε κάποιο CSS, για παράδειγμα, αυτό:
td {
width: 50px;
height: 50px;
border: 1px solid black;
}
Εδώ είναι το πρόχειρο της περιγραφόμενης συνάρτησης:
function createTable(rows, cols, parent) {
let table = document.createElement('table');
// εδώ θα δημιουργήσουμε τον πίνακα με rows σειρές και cols στήλες
for () {
for () {
}
}
parent.appendChild(table);
}
Συμπληρώστε τον κώδικα του παραπάνω προσχεδίου συνάρτησης. Δοκιμάστε τη λειτουργία της έτοιμης συνάρτησης.