Πώς να χρησιμοποιήσετε μια συγκεκριμένη κλάση σε JavaScript για να μετρήσετε κελιά πίνακα

Ενεργοποίηση ενός Modal με Active Class Count σε έναν πίνακα

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

Σε αυτό το παράδειγμα, τα κελιά πίνακα που ικανοποιούν ορισμένες απαιτήσεις θα έχουν μια κλάση με όνομα ενεργός προστέθηκαν σε αυτά. ΕΝΑ JavaScript Η συνάρτηση που εξετάζει κάθε κελί, επαληθεύει το περιεχόμενό του και στη συνέχεια εφαρμόζει κατάλληλα την κλάση χρησιμοποιείται για να γίνει αυτό. Είναι μια παραγωγική μέθοδος οργάνωσης συγκεκριμένων κυττάρων σύμφωνα με τα δεδομένα τους.

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

Αυτό το σεμινάριο θα σας διδάξει πώς να χρησιμοποιείτε τη JavaScript για να μετράτε τον αριθμό των κελιών που έχουν το ενεργός τάξη και να εκκινήσει αυτόματα ένα modal που δείχνει την καταμέτρηση. Χρησιμοποιώντας jQuery, η λύση είναι απλή, αποτελεσματική και απλή στην εφαρμογή.

Κατανόηση του σεναρίου: Καταμέτρηση κελιών και ενεργοποίηση ενός Modal

Στο πρώτο παράδειγμα σεναρίου, κάθε κελί πίνακα επαναλαμβάνεται, το περιεχόμενό του αξιολογείται και μια κλάση εκχωρείται ανάλογα με την αξιολόγηση χρησιμοποιώντας jQuery. Αυτή η δυνατότητα καθίσταται δυνατή με την επανάληψη σε καθένα από τα στοιχεία στον πίνακα χρησιμοποιώντας το .κάθε() μέθοδος. Οι κανονικές εκφράσεις χρησιμοποιούνται για την εφαρμογή δύο ελέγχων υπό όρους εντός αυτού του βρόχου. Αυτά τα μοτίβα εξακριβώνουν εάν το περιεχόμενο κάθε κελιού τηρεί μια συγκεκριμένη μορφή. Το κύτταρο κερδίζει το ενεργός τάξη εάν το περιεχόμενο ακολουθεί ένα μοτίβο, όπως έναν αριθμό και ένα κεφαλαίο γράμμα. Για να κατηγοριοποιηθούν δυναμικά τα κύτταρα, αυτό είναι απαραίτητο.

Με το RegExp() Κατασκευαστής, δημιουργείται μια κανονική έκφραση για αντιστοίχιση αριθμών ακολουθούμενη από γράμματα. Αυτή η τεχνική διασφαλίζει ότι τα κελιά με δεδομένα, όπως "1A" ή "3C", αναγνωρίζονται και επισημαίνονται με την τρέχουσα κλάση. Το κελί λαμβάνει μια ξεχωριστή κλάση που ονομάζεται κανένας εάν το περιεχόμενο ταιριάζει με διαφορετικό μοτίβο, όπως "c" ακολουθούμενο από έναν αριθμό. Αυτό καθιστά δυνατή την ακριβέστερη ταξινόμηση των δεδομένων στον πίνακα. Επιπλέον, το addClass() Η μέθοδος εγγυάται ότι τα κελιά μπορούν να προσθέσουν αυτές τις κλάσεις χωρίς να διαγράψουν τυχόν κλάσεις που μπορεί να έχουν ήδη.

Το επόμενο βήμα είναι να μετρήσετε τα κατάλληλα κελιά και να ξεκινήσετε ένα modal αφού όλα έχουν επισημανθεί με την ενεργή κλάση. Κάθε φορά που ένα κελί αποκτά την ενεργή κλάση, η μέτρηση αυξάνεται και αποθηκεύεται σε μια μεταβλητή που ονομάζεται activeCount. Ο αριθμός των κελιών που πληρούν τις προϋποθέσεις στον πίνακα πρέπει να εξακριβωθεί χρησιμοποιώντας αυτήν την καταμέτρηση. Χρησιμοποιώντας το .dialog() λειτουργία από το jQuery UI, δημιουργείται ένα modal όταν ολοκληρωθεί η καταμέτρηση. Ο αυτόματο άνοιγμα: αληθές Το χαρακτηριστικό επιτρέπει στο modal να ανοίγει αυτόματα. Ο αριθμός των ενεργών κελιών εμφανίζεται μέσα στο modal.

Στη δεύτερη περίπτωση, χρησιμοποιείται JavaScript βανίλιας για να αντιγράψει την ίδια διαδικασία. querySelectorAll() χρησιμοποιείται στη θέση του jQuery σε αυτήν την προσέγγιση για την επιλογή όλων των κελιών του πίνακα και ένα απλό forEach() ο βρόχος επαναλαμβάνεται σε κάθε κελί. Οι τυπικές εκφράσεις χρησιμοποιούνται για να ταιριάζουν με το περιεχόμενο των κελιών, όπως και στη λύση jQuery. Εάν εντοπιστεί μια αντιστοίχιση, το activeCount ενημερώνεται και η ενεργή κλάση προστίθεται χρησιμοποιώντας το classList.add() μέθοδος. Τελικά, η αλλαγή του εσωτερικού HTML ενός προκαθορισμένου στοιχείου modal στο DOM ενεργοποιεί το modal. Το ίδιο αποτέλεσμα με το παράδειγμα jQuery επιτυγχάνεται χρησιμοποιώντας αυτήν τη λύση, η οποία δεν βασίζεται σε εξωτερικές βιβλιοθήκες.

$(document).ready(function() {
  var activeCount = 0;
  $('td').each(function() {
    var $this = $(this);
    if ($this.text().match(new RegExp(/[0-9][A-Z]/)) !== null) {
      $this.addClass('active');
      activeCount++;
    }
    if ($this.text().match(new RegExp(/c[0-9]/)) !== null) {
      $this.addClass('none');
    }
  });
  // Trigger the modal with the count of 'active' items
  $('#myModal').dialog({ autoOpen: true, modal: true, title: 'Active Count',
      open: function() { $(this).html('Number of active items: ' + activeCount); } });
});

document.addEventListener('DOMContentLoaded', function() {
  var cells = document.querySelectorAll('td');
  var activeCount = 0;
  cells.forEach(function(cell) {
    if (/[0-9][A-Z]/.test(cell.textContent)) {
      cell.classList.add('active');
      activeCount++;
    } else if (/c[0-9]/.test(cell.textContent)) {
      cell.classList.add('none');
    }
  });
  // Open the modal to display the count
  var modal = document.getElementById('myModal');
  modal.style.display = 'block';
  modal.innerHTML = 'Number of active items: ' + activeCount;
});

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];
  let activeCount = 0;
  tableData.forEach(row => {
    row.forEach(cell => {
      if (/[0-9][A-Z]/.test(cell)) {
        activeCount++;
      }
    });
  });
  res.render('index', { activeCount });
});
app.listen(3000, () => console.log('Server running on port 3000'));

const { countActiveCells } = require('./countActive');
test('counts active cells correctly', () => {
  const tableData = [['1A', '2B', '3C'], ['c1', '4D', '5E']];
  expect(countActiveCells(tableData)).toBe(4);
});
test('returns zero if no active cells', () => {
  const tableData = [['c1', 'c2', 'c3'], ['c4', 'c5', 'c6']];
  expect(countActiveCells(tableData)).toBe(0);
});

Επέκταση της επιλογής κελιών και του χειρισμού κλάσεων σε JavaScript

Εργασία με JavaScript και πίνακες HTML περιλαμβάνει επίσης τη δυνατότητα δυναμικής τροποποίησης των τάξεων ως απόκριση στην είσοδο ή το περιεχόμενο του χρήστη. Μπορείτε να κάνετε περισσότερα από το να μετράτε απλώς τα κελιά. μπορείτε επίσης να χειριστείτε τις εισαγωγές χρήστη και να αλλάξετε άμεσα το περιεχόμενο του πίνακα. Για παράδειγμα, χρησιμοποιώντας μεθόδους όπως removeClass() σε jQuery ή classList.remove() στο vanilla JavaScript, μπορείτε να τροποποιήσετε δυναμικά την κλάση, να επισημάνετε ή ακόμα και να αφαιρέσετε την κλάση όταν ένας χρήστης κάνει κλικ σε ένα κελί πίνακα. Ως αποτέλεσμα, οι πίνακες γίνονται πολύ πιο διαδραστικοί και είναι δυνατή περαιτέρω προσαρμογή με βάση ενημερώσεις περιεχομένου σε πραγματικό χρόνο.

Ένας πίνακας που εμφανίζει δεδομένα σε πραγματικό χρόνο όπου συγκεκριμένα κελιά πρέπει να διαχωριστούν οπτικά ανάλογα με μια αλλαγή κλάσης θα ήταν μια χρήσιμη περίπτωση χρήσης για αυτό. Είναι απλό να δεσμεύσετε συναρτήσεις που προκαλούν αυτές τις τροποποιήσεις χρησιμοποιώντας προγράμματα ακρόασης συμβάντων. Στο JavaScript, για παράδειγμα, μπορείτε να χρησιμοποιήσετε addEventListener() για να ακούσετε συμβάντα σε συγκεκριμένα κελιά, όπως κλικ ή πάτημα πλήκτρων. Πρόσθετες τροποποιήσεις τάξης ή ακόμα και ενημερώσεις σε έναν μετρητή που αντικατοπτρίζει τον αριθμό των ενεργός κελιά στον πίνακα μπορεί να προκύψουν από αυτήν την αλληλεπίδραση.

Μπορείτε επίσης να σκεφτείτε καταστάσεις στις οποίες τα κελιά θα πρέπει να ενημερώνονται αυτόματα χωρίς καμία εισαγωγή από τον χρήστη. Το περιεχόμενο του πίνακα μπορεί να ενημερώνεται και να παρακολουθείται συνεχώς μέσω διαστήματος ή κλήσεων AJAX. Κανονικές εκφράσεις και μέθοδοι όπως setInterval() επιτρέψτε στον πίνακα να αλλάζει αυτόματα τις κλάσεις του και να ξεκινήσει ένα modal όταν επιτευχθεί ένα όριο. Οι πίνακες μπορούν πλέον να χρησιμοποιηθούν σε πιο δυναμικές εφαρμογές, όπως πίνακες εργαλείων και ρυθμίσεις βάσει δεδομένων.