Kuidas kasutada JavaScriptis tabeli lahtrite loendamiseks kindlat klassi

Modaali käivitamine aktiivse klasside loendusega tabelis

Töötades võite soovida rakendada kohandatud käitumist, mis põhineb iga lahtri sisul . Näiteks saate tabeli lahtritele klasside dünaamiliseks määramiseks kasutada konkreetseid mustreid või kriteeriume. Selle tulemusel võib teie tabel muutuda kasulikumaks ja kaasahaaravamaks.

Selles näites on teatud nõuetele vastavatel tabelilahtritel klass nimega neile lisatud. A Selleks kasutatakse funktsiooni, mis uurib iga lahtrit, kontrollib selle sisu ja rakendab seejärel klassi asjakohaselt. See on produktiivne meetod konkreetsete rakkude korraldamiseks vastavalt nende andmetele.

Pärast rakendamist klass lahtrite alamhulga, võib selle klassiga lahtrite arvu loendamine olla sagedane järgmine samm. Kui soovite alustada sündmust või tegevust, võib selline loendust näitava modaali avamine olla nende lahtrite loendamine üsna kasulik.

See õpetus õpetab teile, kuidas kasutada JavaScripti lahtrite arvu loendamiseks, millel on klassi ja käivitada automaatselt modaal, mis näitab loendust. Kasutades , on lahendus lihtne, tõhus ja lihtsalt rakendatav.

Käsk	Kasutusnäide
.each()	See jQuery funktsioon itereerib iga sobitatud elementide komplekti elementi. See rakendab tingimusloogikat või klasse, itereerides üle iga tabeli lahtri (	) in our example.
addClass()	The selected items receive one or more class names added to them by this jQuery method. The script applies the või klassi lahtritesse vastavalt nende sisule.
.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	lahter vastavad konkreetsele mustrile.
RegExp()	Regulaaravaldised tehakse selle JavaScripti konstruktoriga. Skript võib sisu põhjal klasse määrata, tuvastades selliseid mustreid nagu või .
classList.add()	See põhiline JavaScripti tehnika annab elemendile kindla klassi. See toimib sarnaselt jQuery addClass()-ga vanilje JavaScripti lahenduses, lisades või klass olenevalt tingimustest.
DOMContentLoaded	Kui HTML-dokumendi laadimine ja sõelumine on lõppenud, käivitub sündmus DOMContentLoaded. Vanilla JavaScripti näites tagab see, et skript käivitub pärast DOM-i laadimise lõpetamist.
querySelectorAll()	See JavaScripti funktsioon tagastab dokumendis kõik elemendid, mis vastavad antud CSS-i valijale. Põhilises JavaScripti näites kasutatakse seda kõigi valimiseks	element in the table for further processing.
forEach()	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.

Skripti mõistmine: rakkude loendamine ja modaali käivitamine

Esimeses skripti näites itereeritakse iga tabeli lahtrit, hinnatakse selle sisu ja määratakse klass sõltuvalt hindamisest, kasutades . See funktsioon on võimalik, kui korratakse läbi iga

Koos konstruktor, koostatakse regulaaravaldis numbrite, millele järgnevad tähed, sobitamiseks. See meetod tagab, et andmeid sisaldavad lahtrid, nagu "1A" või "3C", tuvastatakse ja märgistatakse praeguse klassiga. Lahter saab eraldi klassi nimega kui sisu ühtib mõne muu mustriga, siis näiteks "c", millele järgneb number. See võimaldab tabelis olevaid andmeid täpsemalt klassifitseerida. Lisaks on meetod tagab, et lahtritesse saab neid klasse lisada, ilma et kustutataks neil juba olemasolevaid klasse.

Järgmine samm on sobivate lahtrite loendamine ja modaali käivitamine pärast seda, kui need on kõik aktiivse klassiga märgistatud. Iga kord, kui lahter saab aktiivse klassi, suurendatakse loendust ja salvestatakse muutuja nimega . Tabeli kvalifitseeruvate lahtrite arv tuleb kindlaks teha selle loendi abil. Kasutades funktsiooni jQuery kasutajaliidesest, genereeritakse modaal, kui loendus on lõppenud. The atribuut võimaldab modaalil automaatselt avaneda. Aktiivsete rakkude arv kuvatakse modaali sees.

Teisel juhul kasutatakse identse protseduuri dubleerimiseks vanilje JavaScripti. kasutatakse selles lähenemisviisis kõigi tabeli lahtrite valimiseks jQuery asemel, ja see on lihtne silmus itereerib läbi iga lahtri. Lahtri sisu sobitamiseks kasutatakse regulaaravaldisi, nagu jQuery lahenduses. Kui avastatakse sobivus, värskendatakse ActiveCount ja aktiivne klass lisatakse kasutades meetod. Lõppkokkuvõttes aktiveerib DOM-i eelmääratletud modaalse elemendi sisemise HTML-i muutmine modaali. Selle lahendusega, mis ei sõltu välistest raamatukogudest, saavutatakse sama tulemus, mis jQuery näite puhul.

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

Lahtrite valiku ja klasside käsitlemise laiendamine JavaScriptis

Koos töötamine ja hõlmab ka võimalust dünaamiliselt muuta klasse vastuseks kasutaja sisendile või sisule. Saate teha enamat kui lihtsalt lahtreid loendada; saate käsitleda ka kasutaja sisestusi ja tabeli sisu koheselt muuta. Näiteks kasutades selliseid meetodeid nagu jQuerys või classList.remove() vanilla JavaScriptis saate klassi dünaamiliselt muuta, esile tõsta või isegi klassi eemaldada, kui kasutaja klõpsab tabeli lahtril. Tabelid muutuvad tänu sellele tunduvalt interaktiivsemaks ja võimalik on täiendav kohandamine sisu värskenduste põhjal reaalajas.

Reaalajas andmeid kuvav tabel, kus konkreetsed lahtrid tuleb sõltuvalt klassimuudatusest visuaalselt eraldada, oleks selle jaoks kasulik kasutusjuht. Neid muudatusi põhjustavaid funktsioone on sündmustekuulajate abil lihtne siduda. Näiteks JavaScriptis saate kasutada teatud lahtrite sündmuste, näiteks klõpsude või klahvivajutuste kuulamiseks. Täiendavad klassi muudatused või isegi loenduri värskendused, mis kajastavad arvu tabeli lahtrid võivad tuleneda sellest interaktsioonist.

Võite mõelda ka olukordadele, kus lahtrid peaksid automaatselt värskendama ilma kasutajapoolse sisendita. Tabeli sisu saab intervalli või AJAX-i kõnede abil pidevalt värskendada ja jälgida. Regulaaravaldised ja meetodid nagu lubab tabelil oma klasse automaatselt muuta ja läve saavutamisel käivitada modaali. Tabeleid saab nüüd kasutada dünaamilisemates rakendustes, nagu armatuurlauad ja andmepõhised seaded.

1. Kuidas saan vanilje JavaScriptis loendada komponente, mis kuuluvad konkreetsesse klassi?
2. Iga selle klassi elemendi valimiseks kasutage ; nende loendamiseks kasutage .
3. Kuidas ma saan tabeli lahtri sisu põhjal sinna klassi lisada?
4. Saate klassi rakendada kasutades ja kontrollige lahtri sisu kasutades või omadused.
5. Mis eristab vanilje JavaScriptis alates jQuerys?
6. on natiivne JavaScripti atribuut ja on jQuery meetod, mis otsib või muudab valitud elementide sisu.
7. Kuidas saab modaali käivitada konkreetsesse klassi kuuluvate lahtrite loendamisel?
8. Modaali konstrueerimiseks jQuerys ja selle käivitamiseks, et see sõltuks konkreetse klassi üksuste arvust, kasutage .
9. Kuidas saan JavaScriptis elemendist klassi välja võtta?
10. Vanilje JavaScriptis saate kasutada klassi eemaldamiseks elemendist.

JavaScripti või jQueryt saab kasutada määratud klassiga lahtrite loendamise haldamiseks, näiteks , tõhusal viisil. Regulaaravaldised on kasulik tööriist tabeli sisu mustrite tuvastamiseks, mis hõlbustab klasside dünaamilist määramist ja muid interaktsioone.

Lisaks on kasulik meetod kasutajate tabeli olekust teavitamiseks modaali algatamine nende aktiivsete lahtrite arvu alusel. The Funktsioon jQuerys või kohandatud modaal on kaks meetodit, mis pakuvad tabeli sisu käsitlemisel palju mitmekülgsust.