Αλλαγή κελιών πίνακα HTML με JavaScript

Ας υποθέσουμε ότι υπάρχει κάποιος πίνακας HTML #table. Ας υποθέσουμε ότι το task μπροστά μας είναι να κάνουμε κάτι με κάθε κελί του πίνακα, για παράδειγμα, να γράψουμε σε κάθε ένα από αυτά το κείμενο '!'.

Ας συζητήσουμε τις αποχρώσεις της λύσης ενός τέτοιου task.

Όπως γνωρίζετε, ένας πίνακας HTML έχει δισδιάστατη δομή: υπάρχουν σειρές και σε αυτές κελιά. Μπορείτε να λύσετε το task μας ως εξής: να επαναλάβετε με βρόχο τις σειρές και σε κάθε σειρά να επαναλάβετε με βρόχο τα κελιά και να κάνετε σε αυτά την ενέργεια που χρειαζόμαστε. Δηλαδή, το σκεπτικό λύσης που περιγράφηκε είναι ανάλογο με το πώς θα δημιουργούσαμε έναν τέτοιο πίνακα, γεμίζοντάς τον με σειρές και κελιά.

Ωστόσο, σε αυτήν την περίπτωση, δύο ένθετοι βρόχοι θα ήταν περιττοί: μπορείτε απλά να πάρετε όλα τα td και να τα επαναλάβετε με έναν βρόχο, εκτελώντας την απαιτούμενη λειτουργία. Ας το κάνουμε:

let tds = document.querySelectorAll('#table td');

for (let td of tds) {
	td.textContent = '!';
}

Ας υποθέσουμε ότι υπάρχει κάποιος πίνακας HTML με αριθμούς και ένα κουμπί. Με το πάτημα του κουμπιού, αυξήστε τον αριθμό σε κάθε κελί του πίνακα κατά το διπλάσιο.