Slik bruker du en bestemt klasse i JavaScript for å telle tabellceller

Utløser en modal med aktiv klassetelling i en tabell

Det kan være lurt å bruke tilpasset oppførsel basert på innholdet i hver celle når du arbeider med HTML-tabeller. Du kan for eksempel bruke spesifikke mønstre eller kriterier for å dynamisk tilordne klasser til tabellceller. Bordet ditt kan bli mer nyttig og engasjerende som et resultat.

I dette eksemplet vil tabellceller som tilfredsstiller visse krav ha en klasse navngitt aktiv lagt til dem. EN JavaScript funksjon som undersøker hver celle, verifiserer innholdet, og deretter bruker klassen riktig brukes til å gjøre dette. Det er en produktiv metode for å organisere bestemte celler i henhold til deres data.

Etter å ha brukt aktiv klasse til et undersett av celler, kan telle antall celler som har denne klassen være et hyppig neste trinn. Hvis du ønsker å starte en hendelse eller handling, slik åpning av en modal som viser antallet, kan telle disse cellene være ganske nyttig.

Denne opplæringen vil lære deg hvordan du bruker JavaScript til å telle antall celler som har aktiv klasse og for å automatisk starte en modal som viser tellingen. Bruker jQuery, er løsningen grei, effektiv og enkel å implementere.

Forstå skriptet: Telle celler og utløse en modal

I det første skripteksemplet blir hver tabellcelle iterert over, innholdet blir evaluert og en klasse tilordnet avhengig av evalueringen ved hjelp av jQuery. Denne funksjonen er gjort mulig ved å iterere gjennom hver av de elementer i tabellen ved hjelp av .hver() metode. Regulære uttrykk brukes til å bruke to betingede kontroller inne i denne løkken. Disse mønstrene fastslår om hver celles innhold holder seg til et bestemt format. Cellen får aktiv klasse hvis innholdet følger et mønster, for eksempel et tall og en stor bokstav. For at cellene skal kategoriseres dynamisk, er dette avgjørende.

Med RegExp() konstruktør, konstrueres et regulært uttrykk for samsvarende tall etterfulgt av bokstaver. Denne teknikken sørger for at celler med data, for eksempel "1A" eller "3C," gjenkjennes og merkes med gjeldende klasse. Cellen mottar en egen klasse kalt ingen hvis innholdet samsvarer med et annet mønster, slik "c" etterfulgt av et tall. Dette gjør det mulig å klassifisere dataene i tabellen mer presist. Videre har addClass() metoden garanterer at celler kan legge til disse klassene uten å slette noen klasser de allerede har.

Det neste trinnet er å telle de riktige cellene og starte en modal etter at de alle har blitt merket med den aktive klassen. Hver gang en celle får den aktive klassen, økes antallet og lagres i en variabel med navn activeCount. Antallet kvalifiserende celler i tabellen må fastslås ved hjelp av denne tellingen. Ved å bruke .dialog() funksjon fra jQuery UI, en modal genereres når tellingen er ferdig. De autoOpen: sant attributt lar modalen åpnes automatisk. Antallet aktive celler vises inne i modalen.

I det andre tilfellet brukes vanilla JavaScript for å duplisere den samme prosedyren. querySelectorAll() brukes i stedet for jQuery i denne tilnærmingen for å velge alle tabellceller, og en enkel forEach() loop itererer gjennom hver celle. Regulære uttrykk brukes for å matche celleinnholdet, akkurat som i jQuery-løsningen. Hvis et samsvar blir oppdaget, oppdateres activeCount og den aktive klassen legges til ved hjelp av classList.add() metode. Til syvende og sist, endring av den interne HTML-en til et forhåndsdefinert modalt element i DOM-en aktiverer modalen. Det samme resultatet som jQuery-eksemplet oppnås ved å bruke denne løsningen, som ikke er avhengig av 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);
});

Utvider cellevalg og klassehåndtering i JavaScript

Arbeider med JavaScript og HTML-tabeller involverer også muligheten til å dynamisk modifisere klasser som svar på brukerinnspill eller innhold. Du kan gjøre mer enn bare å telle cellene; du kan også håndtere brukerinndata og umiddelbart endre innholdet i tabellen. For eksempel ved å bruke metoder som removeClass() i jQuery eller classList.remove() i vanilla JavaScript kan du dynamisk endre klassen, markere eller til og med fjerne klassen når en bruker klikker på en tabellcelle. Tabeller blir betydelig mer interaktive som et resultat, og ytterligere tilpasning basert på oppdateringer av innhold i sanntid er mulig.

En tabell som viser sanntidsdata der spesifikke celler må separeres visuelt avhengig av en klasseendring, vil være et nyttig bruksområde for dette. Det er enkelt å binde funksjoner som forårsaker disse modifikasjonene ved å bruke hendelseslyttere. I JavaScript kan du for eksempel bruke addEventListener() for å lytte etter hendelser på bestemte celler, for eksempel klikk eller tastetrykk. Ytterligere klasseendringer eller til og med oppdateringer til en teller som gjenspeiler antallet aktiv cellene i tabellen kan være resultatet av denne interaksjonen.

Du kan også tenke på situasjoner der celler skal oppdateres automatisk uten innspill fra brukeren. Tabellinnhold kan oppdateres og overvåkes kontinuerlig via et intervall eller AJAX-anrop. Regelmessige uttrykk og metoder som f.eks setInterval() la tabellen automatisk endre klassene og starte en modal når en terskel er nådd. Tabeller kan nå brukes i mer dynamiske applikasjoner, som dashbord og datadrevne innstillinger.