Kaip naudoti konkrečią „JavaScript“ klasę lentelės langeliams skaičiuoti

Modalo suaktyvinimas su aktyvių klasių skaičiumi lentelėje

Dirbdami su kiekvieno langelio turiniu galite pritaikyti tinkintą elgseną . Pavyzdžiui, galite naudoti konkrečius šablonus arba kriterijus, kad dinamiškai priskirtumėte klases lentelės langeliams. Dėl to jūsų lentelė gali tapti naudingesnė ir patrauklesnė.

Šiame pavyzdyje lentelės langeliai, atitinkantys tam tikrus reikalavimus, turės klasę, pavadintą pridėta prie jų. A Tam naudojama funkcija, kuri ištiria kiekvieną langelį, patikrina jos turinį ir tada tinkamai pritaiko klasę. Tai produktyvus būdas organizuoti tam tikras ląsteles pagal jų duomenis.

Pritaikius klasę į langelių poaibį, dažnas kitas žingsnis gali būti ląstelių, turinčių šią klasę, skaičiaus skaičiavimas. Jei norite pradėti įvykį ar veiksmą, toks modalo, rodančio skaičių, atidarymas, šių langelių suskaičiavimas gali būti labai naudingas.

Ši pamoka išmokys jus naudoti „JavaScript“, kad būtų galima suskaičiuoti langelių, turinčių „ klasę ir automatiškai paleisti modalą, rodantį skaičių. Naudojant , sprendimas yra paprastas, efektyvus ir lengvai įgyvendinamas.

komandą	Naudojimo pavyzdys
.each()	Kiekvienas suderintų elementų rinkinio elementas yra kartojamas naudojant šią „jQuery“ funkciją. Taiko sąlyginę logiką arba klases, kartodamas kiekvieną lentelės langelį (	) in our example.
addClass()	The selected items receive one or more class names added to them by this jQuery method. The script applies the arba klasę į ląsteles pagal jų turinį.
.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	langelis atitinka tam tikrą modelį.
RegExp()	Reguliarios išraiškos daromos naudojant šį JavaScript konstruktorių. Scenarijus gali priskirti klases pagal turinį, identifikuodamas šablonus, pvz arba .
classList.add()	Ši pagrindinė „JavaScript“ technika suteikia elementui tam tikrą klasę. Jis veikia panašiai kaip jQuery addClass() vanilla JavaScript sprendime, pridedant arba klasė, priklausomai nuo sąlygų.
DOMContentLoaded	Kai HTML dokumentas baigiamas įkelti ir analizuoti, suaktyvinamas įvykis DOMContentLoaded. „Vanilla JavaScript“ pavyzdyje jis užtikrina, kad scenarijus būtų vykdomas baigus DOM įkėlimą.
querySelectorAll()	Ši „JavaScript“ funkcija grąžina kiekvieną dokumento elementą, atitinkantį nurodytą CSS parinkiklį. Pagrindiniame „JavaScript“ pavyzdyje jis naudojamas norint pasirinkti kiekvieną	element in the table for further processing.
už kiekvieną ()	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.

Scenarijaus supratimas: ląstelių skaičiavimas ir modalo suaktyvinimas

Pirmajame scenarijaus pavyzdyje kiekvienas lentelės langelis kartojamas, jo turinys įvertinamas ir klasė priskiriama priklausomai nuo įvertinimo naudojant . Ši funkcija pasiekiama kartojant kiekvieną iš

Su konstruktorius, sukuriama reguliarioji išraiška, skirta suderinti skaičius, po kurių pateikiamos raidės. Ši technika užtikrina, kad ląstelės su duomenimis, pvz., „1A“ arba „3C“, būtų atpažįstamos ir pažymėtos esama klase. Ląstelė gauna atskirą klasę, vadinamą jei turinys sutampa su kitokiu šablonu, toks „c“, po kurio rašomas skaičius. Tai leidžia tiksliau klasifikuoti duomenis lentelėje. Be to, metodas garantuoja, kad ląstelės gali pridėti šias klases neištrinant jau turimų klasių.

Kitas žingsnis yra suskaičiuoti atitinkamas ląsteles ir pradėti modalą, kai visos jos bus pažymėtos aktyvia klase. Kiekvieną kartą, kai langelis gauna aktyvią klasę, skaičius didėja ir išsaugomas kintamajame pavadintame . Tinkamų langelių skaičius lentelėje turi būti nustatytas naudojant šį skaičių. Naudojant funkcija iš jQuery UI, modalas sugeneruojamas, kai skaičiavimas baigtas. The atributas leidžia modalui atsidaryti automatiškai. Aktyvių ląstelių skaičius rodomas modalo viduje.

Antruoju atveju identiškai procedūrai dubliuoti naudojamas vanilinis JavaScript. Šis metodas naudojamas vietoje jQuery, kad būtų galima pasirinkti visus lentelės langelius, ir tai yra paprasta ciklas kartojasi per kiekvieną langelį. Reguliarios išraiškos naudojamos langelio turiniui suderinti, kaip ir jQuery sprendime. Jei aptinkama atitiktis, aktyvus skaičius atnaujinamas ir aktyvi klasė pridedama naudojant metodas. Galiausiai, pakeitus DOM iš anksto nustatyto modalinio elemento vidinį HTML, modalas suaktyvinamas. Naudojant šį sprendimą, kuris nepriklauso nuo išorinių bibliotekų, pasiekiamas toks pat rezultatas, kaip ir jQuery pavyzdyje.

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

„JavaScript“ langelių pasirinkimo ir klasių tvarkymo išplėtimas

Darbas su ir taip pat apima galimybę dinamiškai modifikuoti klases, reaguojant į vartotojo įvestį ar turinį. Galite ne tik suskaičiuoti ląsteles; taip pat galite tvarkyti vartotojo įvestis ir akimirksniu pakeisti lentelės turinį. Pavyzdžiui, naudojant tokius metodus kaip jQuery arba classList.remove() „vanilla JavaScript“ galite dinamiškai modifikuoti klasę, paryškinti ar net pašalinti klasę, kai vartotojas spustelėja lentelės langelį. Dėl to lentelės tampa daug interaktyvesnės, todėl galimas tolesnis tinkinimas, pagrįstas turinio atnaujinimais realiuoju laiku.

Lentelė, kurioje rodomi realaus laiko duomenys, kai tam tikros ląstelės turi būti vizualiai atskirtos, atsižvelgiant į klasės pakeitimą, būtų naudingas atvejis. Naudojant įvykių klausytojus paprasta susieti funkcijas, kurios sukelia šiuos pakeitimus. Pavyzdžiui, „JavaScript“ galite naudoti klausytis įvykių tam tikrose ląstelėse, pvz., paspaudimų ar klavišų paspaudimų. Papildomos klasės modifikacijos ar net skaitiklio atnaujinimai, atspindintys skaičių lentelės langeliai gali atsirasti dėl šios sąveikos.

Taip pat galite pagalvoti apie situacijas, kai langeliai turėtų būti atnaujinami automatiškai be vartotojo įvesties. Lentelės turinį galima atnaujinti ir nuolat stebėti intervalais arba AJAX skambučiais. Reguliarūs posakiai ir metodai, pvz leisti lentelei automatiškai keisti klases ir paleisti modalą, kai pasiekiamas slenkstis. Dabar lenteles galima naudoti dinamiškesnėse programose, pvz., prietaisų skydeliuose ir duomenimis pagrįstuose nustatymuose.

1. Kaip suskaičiuoti komponentus, priklausančius tam tikrai klasei, naudojant vanilinį JavaScript?
2. Norėdami pasirinkti kiekvieną elementą su ta klase, naudokite ; juos suskaičiuoti, naudoti .
3. Pagal lentelės langelio turinį, kaip prie jo pridėti klasę?
4. Galite taikyti klasę naudodami ir patikrinkite ląstelės turinį naudodami arba savybių.
5. Kas išskiria vanilėje JavaScript iš jQuery?
6. yra vietinė JavaScript nuosavybė ir yra jQuery metodas, kuris nuskaito arba pakeičia pasirinktų elementų turinį.
7. Skaičiuojant langelius, priklausančius tam tikrai klasei, kaip pradėti modalą?
8. Norėdami sukurti modalą programoje „jQuery“ ir paleisti, kad jis priklausytų nuo elementų skaičiaus tam tikroje klasėje, naudokite .
9. Kaip naudoti „JavaScript“ elemento klasę?
10. „Vanilla JavaScript“ galite naudoti pašalinti klasę iš elemento.

„JavaScript“ arba „jQuery“ gali būti naudojami tvarkyti skaičiuojant langelius su nurodyta klase, pvz , efektyviu būdu. Reguliarios išraiškos yra naudingas įrankis lentelės turinio šablonams identifikuoti, o tai palengvina dinaminį klasių priskyrimą ir kitą sąveiką.

Be to, naudingas būdas informuoti vartotojus apie lentelės būseną yra inicijuoti modalą pagal šių aktyvių langelių skaičių. The funkcija jQuery arba pasirinktinis modalas yra du metodai, kurie suteikia daug universalumo tvarkant lentelės turinį.