Ako používať špecifickú triedu v JavaScripte na počítanie buniek tabuľky

Spustenie modálu s aktívnym počtom tried v tabuľke

Možno budete chcieť pri práci použiť vlastné správanie založené na obsahu každej bunky HTML tabuľky. Môžete napríklad použiť špecifické vzory alebo kritériá na dynamické priraďovanie tried k bunkám tabuľky. Váš stôl môže byť vďaka tomu užitočnejší a pútavejší.

V tomto príklade budú mať bunky tabuľky, ktoré spĺňajú určité požiadavky, pomenovanú triedu aktívny pridané k nim. A JavaScript Na tento účel sa používa funkcia, ktorá skúma každú bunku, overuje jej obsah a potom príslušne aplikuje triedu. Je to produktívny spôsob organizácie jednotlivých buniek podľa ich údajov.

Po aplikácii aktívny triedy na podmnožinu buniek, sčítanie počtu buniek, ktoré majú túto triedu, môže byť častým ďalším krokom. Ak chcete spustiť udalosť alebo akciu, ako je napríklad otvorenie modálu, ktorý zobrazuje počet, počítanie týchto buniek môže byť celkom užitočné.

Tento tutoriál vás naučí, ako používať JavaScript na počítanie počtu buniek, ktoré majú aktívny triedy a na automatické spustenie modálu, ktorý zobrazuje počet. Používanie jQuery, riešenie je priamočiare, efektívne a jednoducho implementovateľné.

Pochopenie skriptu: Počítanie buniek a spustenie modálu

V prvom príklade skriptu sa každá bunka tabuľky iteruje, vyhodnotí sa jej obsah a v závislosti od vyhodnotenia sa priradí trieda jQuery. Táto funkcia je umožnená opakovaním každého z nich položky v tabuľke pomocou .každý() metóda. Regulárne výrazy sa používajú na aplikovanie dvoch podmienených kontrol v rámci tohto cyklu. Tieto vzory zisťujú, či obsah každej bunky zodpovedá určitému formátu. Bunka získa aktívny triedy, ak sa obsah riadi vzorom, ako je číslo a veľké písmeno. Pre dynamickú kategorizáciu buniek je to nevyhnutné.

S RegExp() konštruktor, vytvorí sa regulárny výraz pre zhodné čísla nasledované písmenami. Táto technika zabezpečuje, že bunky s údajmi, ako napríklad „1A“ alebo „3C“, sú rozpoznané a označené aktuálnou triedou. Bunka dostane samostatnú triedu tzv žiadny ak sa obsah zhoduje s iným vzorom, napríklad „c“, za ktorým nasleduje číslo. To umožňuje presnejšie klasifikovať údaje v tabuľke. Okrem toho, addClass() metóda zaručuje, že bunky môžu mať tieto triedy pridané bez odstránenia všetkých tried, ktoré už môžu mať.

Ďalším krokom je spočítať príslušné bunky a spustiť modál po tom, čo boli všetky označené aktívnou triedou. Zakaždým, keď bunka získa aktívnu triedu, počet sa zvýši a uloží do premennej s názvom activeCount. Počet kvalifikačných buniek v tabuľke sa musí zistiť pomocou tohto počtu. Pomocou .dialog() z používateľského rozhrania jQuery sa po dokončení počítania vygeneruje modál. The autoOpen: pravda atribút umožňuje automatické otváranie modálu. Počet aktívnych buniek je zobrazený vo vnútri modálu.

V druhom prípade sa na duplikovanie identického postupu používa vanilkový JavaScript. querySelectorAll() sa v tomto prístupe používa namiesto jQuery na výber všetkých buniek tabuľky a je jednoduchý forEach() slučka iteruje cez každú bunku. Regulárne výrazy sa používajú na zhodu s obsahom bunky, rovnako ako v riešení jQuery. Ak sa zistí zhoda, activeCount sa aktualizuje a aktívna trieda sa pridá pomocou classList.add() metóda. Nakoniec, zmena interného HTML preddefinovaného modálneho prvku v DOM aktivuje modálny. Rovnaký výsledok ako v príklade jQuery sa dosiahne použitím tohto riešenia, ktoré sa nespolieha na externé kniž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);
});

Rozširovanie výberu buniek a manipulácie s triedami v JavaScripte

Práca s JavaScript a HTML tabuľky zahŕňa aj schopnosť dynamicky upravovať triedy v reakcii na vstup alebo obsah používateľa. Môžete urobiť viac ako len počítať bunky; môžete tiež spracovávať vstupy používateľov a okamžite meniť obsah tabuľky. Napríklad pomocou metód ako removeClass() v jQuery alebo classList.remove() vo vanilkovom JavaScripte môžete triedu dynamicky upravovať, zvýrazniť alebo dokonca odstrániť, keď používateľ klikne na bunku tabuľky. Tabuľky sa vďaka tomu stanú podstatne interaktívnejšími a je možné ďalšie prispôsobenie založené na aktualizáciách obsahu v reálnom čase.

Tabuľka zobrazujúca údaje v reálnom čase, kde je potrebné vizuálne oddeliť konkrétne bunky v závislosti od zmeny triedy, by bola užitočným prípadom použitia. Je jednoduché spojiť funkcie, ktoré spôsobujú tieto úpravy, pomocou poslucháčov udalostí. V JavaScripte môžete napríklad použiť addEventListener() počúvať udalosti v konkrétnych bunkách, ako sú kliknutia alebo stlačenia klávesov. Dodatočné úpravy triedy alebo dokonca aktualizácie počítadla odrážajúceho počet aktívny bunky v tabuľke môžu byť výsledkom tejto interakcie.

Môžete tiež premýšľať o situáciách, v ktorých by sa bunky mali aktualizovať automaticky bez akéhokoľvek zásahu používateľa. Obsah tabuľky je možné priebežne aktualizovať a monitorovať pomocou intervalových alebo AJAX hovorov. Regulárne výrazy a metódy ako napr setInterval() umožňujú tabuľke automaticky zmeniť svoje triedy a spustiť modal, keď sa dosiahne prah. Tabuľky je teraz možné použiť v dynamickejších aplikáciách, ako sú ovládacie panely a nastavenia založené na údajoch.