Cum să utilizați o anumită clasă în JavaScript pentru a număra celulele tabelului

Declanșarea unui modal cu numărarea claselor active într-un tabel

Poate doriți să aplicați un comportament personalizat bazat pe conținutul fiecărei celule atunci când lucrați cu Tabelele HTML. De exemplu, puteți utiliza modele sau criterii specifice pentru a atribui în mod dinamic clase celulelor tabelului. Ca rezultat, masa dvs. poate deveni mai utilă și mai interesantă.

În acest exemplu, celulele de tabel care îndeplinesc anumite cerințe vor avea o clasă numită activ adăugate acestora. O JavaScript Funcția care examinează fiecare celulă, verifică conținutul acesteia și apoi aplică clasa în mod corespunzător este utilizată pentru a face acest lucru. Este o metodă productivă de organizare a anumitor celule în funcție de datele lor.

După aplicarea activ clasă la un subset de celule, numărarea numărului de celule care au această clasă ar putea fi un pas următor frecvent. Dacă doriți să începeți un eveniment sau o acțiune, o astfel de deschidere a unui mod care arată numărul, numărarea acestor celule poate fi destul de utilă.

Acest tutorial vă va învăța cum să utilizați JavaScript pentru a număra numărul de celule care au activ clasă și pentru a lansa automat un modal care arată numărul. Folosind jQuery, soluția este simplă, eficientă și simplu de implementat.

Înțelegerea scriptului: numărarea celulelor și declanșarea unui modal

În primul exemplu de script, fiecare celulă de tabel este iterată, conținutul ei este evaluat și o clasă este atribuită în funcție de evaluare folosind jQuery. Această caracteristică este posibilă prin iterarea fiecăruia dintre elementele din tabel folosind .fiecare() metodă. Expresiile regulate sunt folosite pentru a aplica două verificări condiționale în interiorul acestei bucle. Aceste modele stabilesc dacă conținutul fiecărei celule aderă la un anumit format. Celula câștigă activ clasa dacă conținutul urmează un model, cum ar fi un număr și o literă majusculă. Pentru ca celulele să fie clasificate dinamic, acest lucru este esențial.

Cu RegExp() constructor, se construiește o expresie regulată pentru potrivirea numerelor urmate de litere. Această tehnică se asigură că celulele cu date, cum ar fi „1A” sau „3C”, sunt recunoscute și etichetate cu clasa curentă. Celula primește o clasă separată numită nici unul dacă conținutul se potrivește cu un model diferit, astfel de „c” urmat de un număr. Acest lucru face posibilă clasificarea mai precisă a datelor din tabel. În plus, cel addClass() metoda garantează că celulele pot avea aceste clase adăugate fără a șterge nicio clasă pe care le-ar putea avea deja.

Următorul pas este să numărați celulele corespunzătoare și să inițiați un modal după ce toate au fost etichetate cu clasa activă. De fiecare dată când o celulă obține clasa activă, numărul este incrementat și salvat într-o variabilă numită activeCount. Numărul de celule de calificare din tabel trebuie să fie determinat folosind acest număr. Folosind .dialog() funcția din jQuery UI, un modal este generat când contorizarea este terminată. The autoOpen: adevărat Atributul permite modalului să se deschidă automat. Numărul de celule active este afișat în interiorul modalului.

În cel de-al doilea caz, JavaScript este folosit pentru a duplica procedura identică. querySelectorAll() este folosit în locul jQuery în această abordare pentru a selecta toate celulele tabelului și o simplă pentru fiecare() bucla iterează prin fiecare celulă. Expresiile regulate sunt utilizate pentru a se potrivi cu conținutul celulei, la fel ca în soluția jQuery. Dacă este descoperită o potrivire, activeCount este actualizat și clasa activă este adăugată utilizând classList.add() metodă. În cele din urmă, modificarea HTML-ului intern al unui element modal predefinit în DOM activează modalul. Același rezultat ca exemplul jQuery este obținut folosind această soluție, care nu se bazează pe biblioteci externe.

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

Extinderea selecției celulelor și gestionării claselor în JavaScript

Lucrul cu JavaScript şi Tabelele HTML implică, de asemenea, capacitatea de a modifica dinamic clasele ca răspuns la intrarea utilizatorului sau la conținut. Puteți face mai mult decât să numărați celulele; de asemenea, puteți gestiona intrările utilizatorilor și puteți schimba instantaneu conținutul tabelului. De exemplu, folosind metode precum removeClass() în jQuery sau classList.remove() în JavaScript vanilla, puteți modifica în mod dinamic clasa, evidențiați sau chiar eliminați clasa atunci când un utilizator face clic pe o celulă de tabel. Ca rezultat, tabelele devin considerabil mai interactive și este posibilă o personalizare suplimentară bazată pe actualizări ale conținutului în timp real.

Un tabel care afișează date în timp real în care anumite celule trebuie separate vizual în funcție de o schimbare de clasă ar fi un caz de utilizare util pentru aceasta. Este simplu să legați funcțiile care provoacă aceste modificări utilizând ascultători de evenimente. În JavaScript, de exemplu, puteți utiliza addEventListener() pentru a asculta evenimente pe anumite celule, cum ar fi clicuri sau apăsări de taste. Modificări suplimentare de clasă sau chiar actualizări ale unui contor care reflectă numărul de activ celulele din tabel pot rezulta din această interacțiune.

De asemenea, vă puteți gândi la situații în care celulele ar trebui să se actualizeze automat fără nicio intervenție din partea utilizatorului. Conținutul tabelului poate fi actualizat și monitorizat continuu printr-un interval sau apeluri AJAX. Expresii regulate și metode precum setInterval() permiteți tabelului să-și schimbe automat clasele și să lanseze un modal atunci când este atins un prag. Tabelele pot fi acum utilizate în aplicații mai dinamice, cum ar fi tablourile de bord și setările bazate pe date.