Kako koristiti određenu klasu u JavaScriptu za brojanje ćelija tablice

Pokretanje modala s aktivnim brojanjem klasa u tablici

Možda ćete htjeti primijeniti prilagođeno ponašanje na temelju sadržaja svake ćelije pri radu HTML tablice. Na primjer, možete koristiti određene uzorke ili kriterije za dinamičko dodjeljivanje klasa ćelijama tablice. Vaš bi stol mogao postati korisniji i privlačniji kao rezultat.

U ovom primjeru, ćelije tablice koje zadovoljavaju određene zahtjeve imat će imenovanu klasu aktivan dodao im. A JavaScript Za to se koristi funkcija koja ispituje svaku ćeliju, provjerava njezin sadržaj i zatim na odgovarajući način primjenjuje klasu. To je produktivna metoda organiziranja određenih stanica prema njihovim podacima.

Nakon primjene aktivan klase u podskup ćelija, brojanje ćelija koje imaju ovu klasu mogao bi biti čest sljedeći korak. Ako želite započeti događaj ili radnju, takvo otvaranje modala koji prikazuje brojanje, brojanje ovih ćelija može biti od velike pomoći.

Ovaj vodič će vas naučiti kako koristiti JavaScript za brojanje ćelija koje imaju aktivan klase i za automatsko pokretanje modala koji prikazuje broj. Korištenje jQuery, rješenje je jednostavno, učinkovito i jednostavno za implementaciju.

Razumijevanje skripte: brojanje stanica i pokretanje modala

U prvom primjeru skripte, svaka ćelija tablice se ponavlja, njen sadržaj se procjenjuje, a klasa se dodjeljuje ovisno o procjeni pomoću jQuery. Ova je značajka omogućena ponavljanjem kroz svaki od stavke u tablici pomoću .svaki() metoda. Regularni izrazi koriste se za primjenu dvije uvjetne provjere unutar ove petlje. Ovi uzorci utvrđuju pridržava li se sadržaj svake ćelije određeni format. Stanica dobiva aktivan klasa ako sadržaj slijedi obrazac, kao što je broj i veliko slovo. Ovo je bitno za dinamičku kategorizaciju stanica.

s RegExp() konstruktor, konstruira se regularni izraz za podudaranje brojeva nakon kojih slijede slova. Ova tehnika osigurava da ćelije s podacima, kao što su "1A" ili "3C", budu prepoznate i označene trenutnom klasom. Ćelija dobiva zasebnu klasu tzv nikakav ako sadržaj odgovara drugom uzorku, kao što je "c" iza kojeg slijedi broj. To omogućuje precizniju klasifikaciju podataka u tablici. Nadalje, addClass() metoda jamči da ćelije mogu imati te klase dodane bez brisanja klasa koje možda već imaju.

Sljedeći korak je brojanje odgovarajućih ćelija i pokretanje modalnog nakon što su sve označene aktivnom klasom. Svaki put kada ćelija dobije aktivnu klasu, broj se povećava i sprema u varijablu pod nazivom activeCount. Broj kvalificirajućih ćelija u tablici mora se utvrditi pomoću ovog brojanja. Korištenje .dialog() funkcija iz jQuery UI, modal se generira kada se brojanje završi. The autoOpen: istina atribut omogućuje automatsko otvaranje modala. Broj aktivnih ćelija prikazan je unutar modala.

U drugom slučaju, vanilla JavaScript se koristi za dupliciranje identične procedure. querySelectorAll() koristi se umjesto jQuery u ovom pristupu za odabir svih ćelija tablice i jednostavan zaSvaki() petlja ponavlja kroz svaku ćeliju. Regularni izrazi koriste se za usklađivanje sadržaja ćelije, baš kao u rješenju jQuery. Ako se otkrije podudaranje, activeCount se ažurira i aktivna klasa se dodaje pomoću classList.add() metoda. U konačnici, mijenjanje unutarnjeg HTML-a unaprijed definiranog modalnog elementa u DOM-u aktivira modal. Isti ishod kao u jQuery primjeru postiže se korištenjem ovog rješenja, koje se ne oslanja na vanjske knjižnice.

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

Proširenje odabira ćelija i rukovanja klasama u JavaScriptu

Rad sa JavaScript i HTML tablice također uključuje mogućnost dinamičke izmjene klasa kao odgovor na korisnički unos ili sadržaj. Možete učiniti više od pukog brojanja stanica; također možete rukovati korisničkim unosima i trenutno mijenjati sadržaj tablice. Na primjer, koristeći metode poput removeClass() u jQuery ili classList.remove() u vanilla JavaScriptu možete dinamički modificirati klasu, istaknuti ili čak ukloniti klasu kada korisnik klikne na ćeliju tablice. Tablice zbog toga postaju znatno interaktivnije, a moguća je i daljnja prilagodba na temelju ažuriranja sadržaja u stvarnom vremenu.

Tablica koja prikazuje podatke u stvarnom vremenu gdje određene ćelije trebaju biti vizualno odvojene ovisno o promjeni klase bila bi koristan slučaj za ovo. Jednostavno je povezati funkcije koje uzrokuju ove izmjene pomoću slušatelja događaja. U JavaScriptu, na primjer, možete koristiti addEventListener() za slušanje događaja na određenim ćelijama, kao što su klikovi ili pritisci tipki. Dodatne izmjene klase ili čak ažuriranja brojača koji odražava broj aktivan ćelije u tablici mogu proizaći iz ove interakcije.

Također možete razmišljati o situacijama u kojima bi se ćelije trebale automatski ažurirati bez ikakvog unosa od strane korisnika. Sadržaj tablice može se ažurirati i kontinuirano pratiti putem intervala ili AJAX poziva. Regularni izrazi i metode kao što su setInterval() dopustite tablici da automatski promijeni svoje klase i pokrene modal kada se dosegne prag. Tablice se sada mogu koristiti u dinamičnijim aplikacijama, poput nadzornih ploča i postavki koje se temelje na podacima.