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 HTML tabulas. 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 aktīvs tiem pievienots. A JavaScript 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 aktīvs 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 aktīvs klasē un automātiski palaist modālu, kas parāda skaitu. Izmantojot jQuery, risinājums ir vienkāršs, efektīvs un vienkārši īstenojams.

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 jQuery. Šī funkcija ir iespējama, atkārtojot katru no vienumus tabulā, izmantojot .each() metodi. Regulāras izteiksmes tiek izmantotas, lai šajā cilpā lietotu divas nosacījumu pārbaudes. Šie modeļi nosaka, vai katras šūnas saturs atbilst noteiktam formātam. Šūna iegūst aktīvs klasē, ja saturs atbilst noteiktam modelim, piemēram, ciparam un lielajam burtam. Tas ir būtiski, lai šūnas tiktu dinamiski klasificētas.

Ar RegExp() 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 neviens ja saturs atbilst citam modelim, piemēram, "c", kam seko skaitlis. Tas ļauj precīzāk klasificēt tabulā esošos datus. Turklāt, addClass() 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 aktīvais skaits. Izmantojot šo skaitu, ir jānosaka atbilstošo šūnu skaits tabulā. Izmantojot .dialog() funkcija no jQuery UI, modāls tiek ģenerēts, kad skaitīšana ir pabeigta. The autoOpen: taisnība 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. querySelectorAll() Šajā pieejā tiek izmantots jQuery vietā, lai atlasītu visas tabulas šūnas, un tas ir vienkārši katram() 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 classList.add() 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 JavaScript un HTML tabulas 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ā removeClass() 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 addEventListener() 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 aktīvs Šī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, setInterval() ļ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.