Sådan bruger du en bestemt klasse i JavaScript til at tælle tabelceller

Udløsning af en modal med aktiv klassetælling i en tabel

Du ønsker måske at anvende tilpasset adfærd baseret på indholdet af hver celle, når du arbejder med HTML-tabeller. For eksempel kan du bruge specifikke mønstre eller kriterier til dynamisk at tildele klasser til tabelceller. Dit bord kan blive mere nyttigt og engagerende som et resultat.

I dette eksempel vil tabelceller, der opfylder visse krav, have en klasse navngivet aktiv tilføjet dem. EN JavaScript funktion, der undersøger hver celle, verificerer dens indhold og derefter anvender klassen korrekt bruges til at gøre dette. Det er en produktiv metode til at organisere bestemte celler i henhold til deres data.

Efter påføring af aktiv klasse til en undergruppe af celler, kan det være et hyppigt næste trin at tælle antallet af celler, der har denne klasse. Hvis du ønsker at starte en begivenhed eller handling, kan det være ganske nyttigt at åbne en modal, der viser antallet, at tælle disse celler.

Denne vejledning vil lære dig, hvordan du bruger JavaScript til at tælle antallet af celler, der har aktiv klasse og for automatisk at starte en modal, der viser optællingen. Bruger jQuery, er løsningen ligetil, effektiv og enkel at implementere.

Forstå scriptet: tælle celler og udløse en modal

I det første script-eksempel gentages hver tabelcelle, dens indhold evalueres, og en klasse tildeles afhængigt af evalueringen vha. jQuery. Denne funktion er muliggjort ved at gentage hver af de elementer i tabellen ved hjælp af .hver() metode. Regulære udtryk bruges til at anvende to betingede kontroller inde i denne løkke. Disse mønstre fastslår, om hver celles indhold overholder et bestemt format. Cellen vinder aktiv klasse, hvis indholdet følger et mønster, såsom et tal og et stort bogstav. For at cellerne kan kategoriseres dynamisk, er dette afgørende.

Med RegExp() konstruktør, konstrueres et regulært udtryk for matchende tal efterfulgt af bogstaver. Denne teknik sikrer, at celler med data, såsom "1A" eller "3C", genkendes og mærkes med den aktuelle klasse. Cellen modtager en separat klasse kaldet ingen hvis indholdet matcher et andet mønster, f.eks. "c" efterfulgt af et tal. Dette gør det muligt at klassificere dataene i tabellen mere præcist. Desuden addClass() metoden garanterer, at celler kan få disse klasser tilføjet uden at slette de klasser, de allerede har.

Det næste trin er at tælle de relevante celler og starte en modal, efter at de alle er blevet mærket med den aktive klasse. Hver gang en celle opnår den aktive klasse, øges antallet og gemmes i en variabel med navn activeCount. Antallet af kvalificerende celler i tabellen skal fastslås ved hjælp af denne optælling. Ved hjælp af .dialog() funktion fra jQuery UI, genereres en modal, når optællingen er færdig. De autoOpen: sandt attribut gør det muligt for modalen at åbne automatisk. Antallet af aktive celler vises inde i modalen.

I det andet tilfælde bruges vanilla JavaScript til at duplikere den identiske procedure. querySelectorAll() bruges i stedet for jQuery i denne tilgang til at vælge alle tabelceller, og en ligetil forHver() loop itererer gennem hver celle. Regulære udtryk bruges til at matche celleindholdet, ligesom i jQuery-løsningen. Hvis et match opdages, opdateres activeCount, og den aktive klasse tilføjes ved hjælp af classList.add() metode. I sidste ende aktiverer ændring af den interne HTML for et foruddefineret modalt element i DOM'en modalen. Det samme resultat som jQuery-eksemplet opnås ved at bruge denne løsning, som ikke er afhængig af eksterne biblioteker.

$(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);
});

Udvidelse af cellevalg og klassehåndtering i JavaScript

Arbejder med JavaScript og HTML-tabeller involverer også evnen til dynamisk at ændre klasser som svar på brugerinput eller indhold. Du kan gøre mere end blot at tælle cellerne; du kan også håndtere brugerinput og øjeblikkeligt ændre indholdet af tabellen. For eksempel ved at bruge metoder som removeClass() i jQuery eller classList.remove() i vanilla JavaScript kan du dynamisk ændre klassen, fremhæve eller endda fjerne klassen, når en bruger klikker på en tabelcelle. Tabeller bliver betydeligt mere interaktive som et resultat, og yderligere tilpasning baseret på opdateringer af indhold i realtid er mulig.

En tabel, der viser realtidsdata, hvor specifikke celler skal adskilles visuelt afhængigt af en klasseændring, ville være en nyttig case for dette. Det er nemt at binde funktioner, der forårsager disse ændringer, ved at bruge hændelseslyttere. I JavaScript kan du for eksempel bruge addEventListener() at lytte efter begivenheder på bestemte celler, såsom klik eller tastetryk. Yderligere klasseændringer eller endda opdateringer til en tæller, der afspejler antallet af aktiv celler i tabellen kan være resultatet af denne interaktion.

Du kan også tænke på situationer, hvor celler skal opdateres automatisk uden input fra brugeren. Tabelindhold kan opdateres og overvåges løbende via et interval eller AJAX-opkald. Regulære udtryk og metoder som f.eks setInterval() tillade tabellen automatisk at ændre sine klasser og starte en modal, når en tærskel er nået. Tabeller kan nu bruges i mere dynamiske applikationer, såsom dashboards og datadrevne indstillinger.