Kā izmantot noteiktu klasi JavaScript, lai skaitītu tabulas šūnas

Modāla aktivizēšana ar aktīvo klašu skaitu tabulā

Strādājot ar, iespējams, vēlēsities piemērot pielāgotu darbību, pamatojoties uz katras šūnas saturu . Piemēram, varat izmantot konkrētus modeļus vai kritērijus, lai tabulas šūnām dinamiski piešķirtu klases. Tādējādi jūsu galds var kļūt noderīgāks un saistošāks.

Šajā piemērā tabulas šūnām, kas atbilst noteiktām prasībām, tiks nosaukta klase tiem pievienots. A Lai to izdarītu, tiek izmantota funkcija, kas pārbauda katru šūnu, pārbauda tās saturu un pēc tam atbilstoši piemēro klasi. Tā ir produktīva metode konkrētu šūnu organizēšanai atbilstoši to datiem.

Pēc pieteikšanās klase uz šūnu apakškopu, bieži nākamais solis varētu būt to šūnu skaita skaitīšana, kurām ir šī klase. Ja vēlaties sākt notikumu vai darbību, šāda modāla atvēršana, kas parāda skaitu, šo šūnu skaitīšana var būt ļoti noderīga.

Šajā apmācībā jūs iemācīsit izmantot JavaScript, lai saskaitītu šūnu skaitu, kurām ir klasē un automātiski palaist modālu, kas parāda skaitu. Izmantojot , risinājums ir vienkāršs, efektīvs un vienkārši īstenojams.

Pavēli	Lietošanas piemērs
.each()	Katrs atbilstošo elementu kopas elements tiek atkārtots ar šo jQuery funkciju. Tas piemēro nosacījumu loģiku vai klases, atkārtojot katru tabulas šūnu (	) in our example.
addClass()	The selected items receive one or more class names added to them by this jQuery method. The script applies the vai klases šūnām atbilstoši to saturam.
.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	šūna atbilst noteiktam modelim.
RegExp()	Regulāras izteiksmes tiek veidotas ar šo JavaScript konstruktoru. Skripts var piešķirt klases, pamatojoties uz saturu, identificējot modeļus, piemēram, vai .
classList.add()	Šī pamata JavaScript tehnika piešķir elementam noteiktu klasi. Tas darbojas līdzīgi kā jQuery addClass() vaniļas JavaScript risinājumā, pievienojot vai klase atkarībā no apstākļiem.
DOMContentLoaded	Kad HTML dokumenta ielāde un parsēšana ir pabeigta, tiek aktivizēts notikums DOMContentLoaded. Vaniļas JavaScript piemērā tas nodrošina, ka skripts tiek izpildīts pēc DOM ielādes.
querySelectorAll()	Katru elementu dokumentā, kas atbilst dotajam CSS atlasītājam, atgriež šī JavaScript funkcija. JavaScript pamata piemērā tas tiek izmantots, lai atlasītu katru	element in the table for further processing.
katram()	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.

Izpratne par skriptu: šūnu skaitīšana un modāla aktivizēšana

Pirmajā skripta piemērā katra tabulas šūna tiek atkārtota, tās saturs tiek novērtēts un atkarībā no novērtējuma tiek piešķirta klase, izmantojot . Šī funkcija ir iespējama, atkārtojot katru no

Ar konstruktoru, tiek konstruēta regulāra izteiksme sakrītošiem cipariem, kam seko burti. Šis paņēmiens nodrošina, ka šūnas ar datiem, piemēram, "1A" vai "3C", tiek atpazītas un marķētas ar pašreizējo klasi. Šūna saņem atsevišķu klasi, ko sauc ja saturs atbilst citam modelim, piemēram, "c", kam seko skaitlis. Tas ļauj precīzāk klasificēt tabulā esošos datus. Turklāt, Metode garantē, ka šūnām šīs klases var pievienot, neizdzēšot tajās jau esošās klases.

Nākamais solis ir saskaitīt atbilstošās šūnas un uzsākt modālu pēc tam, kad tās visas ir marķētas ar aktīvo klasi. Katru reizi, kad šūna iegūst aktīvo klasi, skaits tiek palielināts un saglabāts mainīgajā ar nosaukumu . Izmantojot šo skaitu, ir jānosaka atbilstošo šūnu skaits tabulā. Izmantojot funkcija no jQuery UI, modāls tiek ģenerēts, kad skaitīšana ir pabeigta. The atribūts ļauj modālam automātiski atvērties. Modāla iekšpusē tiek parādīts aktīvo šūnu skaits.

Otrajā gadījumā, lai dublētu identisku procedūru, tiek izmantots vaniļas JavaScript. Šajā pieejā tiek izmantots jQuery vietā, lai atlasītu visas tabulas šūnas, un tas ir vienkārši cilpa atkārtojas katrā šūnā. Regulāras izteiksmes tiek izmantotas, lai saskaņotu šūnas saturu, tāpat kā jQuery risinājumā. Ja tiek atklāta atbilstība, ActiveCount tiek atjaunināts un aktīvā klase tiek pievienota, izmantojot metodi. Galu galā, mainot DOM iepriekš definēta modāla elementa iekšējo HTML, modāls tiek aktivizēts. Izmantojot šo risinājumu, kas nav atkarīgs no ārējām bibliotēkām, tiek sasniegts tāds pats rezultāts kā jQuery piemērā.

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

Šūnu atlases un klašu apstrādes paplašināšana JavaScript

Strādājot ar un ietver arī iespēju dinamiski modificēt klases, reaģējot uz lietotāja ievadi vai saturu. Jūs varat darīt vairāk, nekā tikai saskaitīt šūnas; varat arī apstrādāt lietotāja ievades un uzreiz mainīt tabulas saturu. Piemēram, izmantojot tādas metodes kā jQuery vai classList.remove() vaniļas JavaScript versijā jūs varat dinamiski modificēt klasi, izcelt vai pat noņemt klasi, kad lietotājs noklikšķina uz tabulas šūnas. Tā rezultātā tabulas kļūst ievērojami interaktīvākas, un ir iespējama turpmāka pielāgošana, pamatojoties uz satura atjauninājumiem reāllaikā.

Tabula, kurā parādīti reāllaika dati, kur konkrētas šūnas ir vizuāli jāatdala atkarībā no klases izmaiņām, būtu noderīgs izmantošanas gadījums. Funkcijas, kas izraisa šīs modifikācijas, ir vienkārši saistīt, izmantojot notikumu uztvērējus. Piemēram, JavaScript varat izmantot lai noklausītos notikumus noteiktās šūnās, piemēram, klikšķus vai taustiņu nospiešanu. Papildu klases modifikācijas vai pat skaitītāja atjauninājumi, kas atspoguļo skaitu Šīs mijiedarbības rezultātā var rasties tabulas šūnas.

Varat arī padomāt par situācijām, kad šūnām ir jāatjaunina automātiski bez lietotāja ievades. Tabulas saturu var atjaunināt un pastāvīgi uzraudzīt, izmantojot intervālu vai AJAX zvanus. Regulāras izteiksmes un metodes, piemēram, ļauj tabulai automātiski mainīt savas klases un palaist modālu, kad tiek sasniegts slieksnis. Tabulas tagad var izmantot dinamiskākās lietojumprogrammās, piemēram, informācijas paneļos un ar datiem pamatotos iestatījumos.

1. Kā vaniļas JavaScript var saskaitīt komponentus, kas pieder noteiktai klasei?
2. Lai atlasītu katru elementu ar šo klasi, izmantojiet ; lai tās saskaitītu, izmantojiet .
3. Kā es varu tai pievienot klasi, pamatojoties uz tabulas šūnas saturu?
4. Jūs varat pieteikties klasei, izmantojot un pārbaudiet šūnas saturu, izmantojot vai īpašības.
5. Kas atšķir vaniļas JavaScript no jQuery?
6. ir vietējais JavaScript īpašums, un ir jQuery metode, kas izgūst vai maina atlasīto elementu saturu.
7. Kā es varu sākt modālu, skaitot šūnas, kas pieder noteiktai klasei?
8. Lai izveidotu modālu programmā jQuery un lai tas būtu atkarīgs no vienumu skaita ar noteiktu klasi, izmantojiet .
9. Kā programmā JavaScript var izņemt klasi no elementa?
10. Vaniļas JavaScript varat izmantot lai noņemtu klasi no elementa.

JavaScript vai jQuery var izmantot, lai pārvaldītu šūnu skaitīšanu ar noteiktu klasi, piemēram , efektīvā veidā. Regulārās izteiksmes ir noderīgs rīks, lai identificētu tabulas satura modeļus, kas atvieglo dinamisku klašu piešķiršanu un citas mijiedarbības.

Turklāt noderīga metode lietotāju informēšanai par tabulas statusu ir modāla iniciēšana, pamatojoties uz šo aktīvo šūnu skaitu. The Funkcija jQuery vai pielāgots modāls ir divas metodes, kas nodrošina lielu daudzpusību, apstrādājot tabulas saturu.