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 HTML tabelid. 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 aktiivne neile lisatud. A JavaScript 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 aktiivne 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 aktiivne klassi ja käivitada automaatselt modaal, mis näitab loendust. Kasutades jQuery, on lahendus lihtne, tõhus ja lihtsalt rakendatav.

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 jQuery. See funktsioon on võimalik, kui korratakse läbi iga üksused tabelis kasutades .each() meetod. Regulaaravaldisi kasutatakse selles tsüklis kahe tingimusliku kontrolli rakendamiseks. Need mustrid määravad kindlaks, kas iga lahtri sisu järgib teatud vormingut. Rakk võidab aktiivne klassi, kui sisu järgib mustrit, näiteks numbrit ja suurtähte. Rakkude dünaamiliseks kategoriseerimiseks on see oluline.

Koos RegExp() 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 mitte ühtegi 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 addClass() 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 activeCount. Tabeli kvalifitseeruvate lahtrite arv tuleb kindlaks teha selle loendi abil. Kasutades .dialog() funktsiooni jQuery kasutajaliidesest, genereeritakse modaal, kui loendus on lõppenud. The autoOpen: tõsi atribuut võimaldab modaalil automaatselt avaneda. Aktiivsete rakkude arv kuvatakse modaali sees.

Teisel juhul kasutatakse identse protseduuri dubleerimiseks vanilje JavaScripti. querySelectorAll() kasutatakse selles lähenemisviisis kõigi tabeli lahtrite valimiseks jQuery asemel, ja see on lihtne forEach() 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 classList.add() 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 JavaScript ja HTML tabelid 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 removeClass() 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 addEventListener() 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 aktiivne 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 setInterval() 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.