Kako uporabiti določen razred v JavaScriptu za štetje celic tabele

Sprožitev modala s štetjem aktivnih razredov v tabeli

Pri delu boste morda želeli uporabiti vedenje po meri glede na vsebino vsake celice . Uporabite lahko na primer posebne vzorce ali merila za dinamično dodeljevanje razredov celicam tabele. Zaradi tega bo vaša miza morda bolj uporabna in privlačna.

V tem primeru bodo celice tabele, ki izpolnjujejo določene zahteve, imele poimenovan razred jim je dodal. A Za to se uporablja funkcija, ki pregleda vsako celico, preveri njeno vsebino in nato ustrezno uporabi razred. To je produktivna metoda organiziranja določenih celic glede na njihove podatke.

Po nanosu razreda v podmnožico celic, je lahko pogost naslednji korak štetje števila celic, ki imajo ta razred. Če želite začeti dogodek ali dejanje, je lahko tako odpiranje modala, ki prikazuje štetje, štetje teh celic zelo koristno.

Ta vadnica vas bo naučila, kako uporabljati JavaScript za štetje števila celic, ki imajo razreda in samodejno zažene modal, ki prikazuje štetje. Uporaba , je rešitev enostavna, učinkovita in enostavna za izvedbo.

Ukaz	Primer uporabe
.each()	Ta funkcija jQuery ponovi vsak element v nizu ujemajočih se elementov. Uporablja pogojno logiko ali razrede s ponavljanjem po vsaki celici tabele (	) in our example.
addClass()	The selected items receive one or more class names added to them by this jQuery method. The script applies the oz razred v celice glede na njihovo vsebino.
.dialog()	Used with jQuery UI to generate a modal dialog. When the script triggers the modal, the autoOpen: true option makes sure it opens automatically and shows the number of active items.
.text()	The text content of the chosen components is retrieved or set using this technique. In this instance, it checks to see if the contents of every	celica ustreza določenemu vzorcu.
RegExp()	S tem konstruktorjem JavaScript so narejeni regularni izrazi. Skript lahko dodeli razrede na podlagi vsebine z identifikacijo vzorcev, kot je npr oz .
classList.add()	Ta osnovna tehnika JavaScript daje elementu določen razred. Deluje podobno kot jQueryjev addClass() v različici JavaScript z dodajanjem oz razred glede na pogoje.
DOMContentLoaded	Ko se dokument HTML konča z nalaganjem in razčlenjevanjem, se sproži dogodek DOMContentLoaded. V primeru vanilije JavaScript poskrbi, da se skript izvede, ko se DOM konča z nalaganjem.
querySelectorAll()	Vsak element v dokumentu, ki se ujema z danim izbirnikom CSS, vrne ta funkcija JavaScript. V osnovnem primeru JavaScript se uporablja za izbiro vsakega	element in the table for further processing.
zaVsak()	An array method in JavaScript that lets you iterate over elements. Here, it's utilized to iterate over every table cell that querySelectorAll() returned and apply the required logic to each one.

Razumevanje skripta: štetje celic in sprožitev modala

V prvem primeru skripta se vsaka celica tabele ponovi, njena vsebina se ovrednoti in glede na vrednotenje se dodeli razred z . Ta funkcija je omogočena s ponavljanjem skozi vsako od

z konstruktorja, je sestavljen regularni izraz za ujemanje števil, ki jim sledijo črke. Ta tehnika zagotavlja, da so celice s podatki, kot sta »1A« ali »3C«, prepoznane in označene s trenutnim razredom. Celica prejme ločen razred, imenovan če se vsebina ujema z drugim vzorcem, na primer "c", ki mu sledi številka. To omogoča natančnejšo klasifikacijo podatkov v tabeli. Poleg tega je zagotavlja, da lahko celicam dodajo te razrede, ne da bi izbrisali kateri koli razred, ki ga morda že imajo.

Naslednji korak je štetje ustreznih celic in sprožitev modalnega, potem ko so vse označene z aktivnim razredom. Vsakič, ko celica pridobi aktivni razred, se število poveča in shrani v spremenljivko z imenom . Število kvalificiranih celic v tabeli je treba ugotoviti s tem štetjem. Uporaba funkcijo iz uporabniškega vmesnika jQuery, se modal ustvari, ko je štetje končano. The atribut omogoča, da se modal samodejno odpre. Število aktivnih celic je prikazano znotraj modala.

V drugem primeru se za podvajanje identičnega postopka uporabi vaniljev JavaScript. se pri tem pristopu uporablja namesto jQuery za izbiro vseh celic tabele in preprost zanka ponavlja skozi vsako celico. Regularni izrazi se uporabljajo za ujemanje z vsebino celice, tako kot v rešitvi jQuery. Če je ujemanje odkrito, se activeCount posodobi in aktivni razred se doda z uporabo metoda. Navsezadnje spreminjanje notranjega HTML-ja vnaprej določenega modalnega elementa v DOM aktivira modal. Enak rezultat kot primer jQuery je dosežen s to rešitvijo, ki se ne zanaša na zunanje 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);
});

Razširitev izbire celic in ravnanja z razredi v JavaScriptu

Delo z in vključuje tudi zmožnost dinamičnega spreminjanja razredov kot odziv na uporabniški vnos ali vsebino. Lahko storite več kot le preštejete celice; lahko tudi obravnavate uporabniške vnose in takoj spremenite vsebino tabele. Na primer z uporabo metod, kot je v jQuery oz classList.remove() v različici JavaScript lahko dinamično spremenite razred, ga označite ali celo odstranite, ko uporabnik klikne celico tabele. Tabele postanejo zaradi tega bistveno bolj interaktivne, možna pa je tudi nadaljnja prilagoditev na podlagi posodobitev vsebine v realnem času.

Tabela, ki prikazuje podatke v realnem času, kjer je treba določene celice vizualno ločiti glede na spremembo razreda, bi bila koristen primer uporabe za to. Funkcije, ki povzročajo te spremembe, je preprosto povezati s poslušalci dogodkov. V JavaScriptu lahko na primer uporabite za poslušanje dogodkov v določenih celicah, kot so kliki ali pritiski tipk. Dodatne spremembe razreda ali celo posodobitve števca, ki odraža število celic v tabeli je lahko posledica te interakcije.

Razmislite lahko tudi o situacijah, v katerih naj se celice samodejno posodabljajo brez kakršnega koli vnosa uporabnika. Vsebino tabele je mogoče stalno posodabljati in spremljati prek intervalnih klicev ali klicev AJAX. Regularni izrazi in metode, kot npr dovoli tabeli, da samodejno spremeni svoje razrede in zažene modal, ko je dosežen prag. Tabele je zdaj mogoče uporabljati v bolj dinamičnih aplikacijah, kot so nadzorne plošče in nastavitve, ki temeljijo na podatkih.

1. Kako lahko v vanilla JavaScript preštejem komponente, ki pripadajo določenemu razredu?
2. Če želite izbrati vsak element s tem razredom, uporabite ; da jih preštejemo, uporabimo .
3. Kako lahko glede na vsebino celice tabele dodam razred?
4. Razred lahko uporabite z uporabo in preglejte vsebino celice z uporabo oz lastnosti.
5. Kaj odlikuje v vanilla JavaScript iz v jQuery?
6. je izvorna lastnost JavaScripta in je metoda jQuery, ki pridobi ali spremeni vsebino izbranih elementov.
7. Kako lahko pri štetju celic, ki pripadajo določenemu razredu, začnem modal?
8. Če želite sestaviti modal v jQuery in ga sprožiti glede na število elementov z določenim razredom, uporabite .
9. Kako lahko v JavaScriptu vzamem razred iz elementa?
10. V vanilla JavaScript lahko uporabite odstraniti razred iz elementa.

JavaScript ali jQuery je mogoče uporabiti za upravljanje štetja celic z določenim razredom, npr , na učinkovit način. Regularni izrazi so uporabno orodje za prepoznavanje vzorcev v vsebini tabel, kar olajša dinamično dodeljevanje razredov in druge interakcije.

Poleg tega je uporabna metoda obveščanja uporabnikov o statusu tabele sprožitev modala na podlagi števila teh aktivnih celic. The funkcija v jQuery ali modal po meri sta dve metodi, ki zagotavljata veliko mero vsestranskosti, ko gre za obravnavanje vsebine tabele.