Tietyn luokan käyttäminen JavaScriptissä taulukon solujen laskemiseen

Modaalin käynnistäminen aktiivisella luokkamäärällä taulukossa

Voit halutessasi soveltaa mukautettua toimintaa kunkin solun sisällön perusteella työskennellessäsi HTML-taulukoita. Voit esimerkiksi määrittää luokkia dynaamisesti taulukon soluihin käyttämällä tiettyjä malleja tai ehtoja. Tämän seurauksena pöydästäsi voi tulla hyödyllisempi ja kiinnostavampi.

Tässä esimerkissä tietyt vaatimukset täyttävillä taulukon soluilla on luokka nimeltä aktiivinen lisätty niihin. A JavaScript Tähän käytetään funktiota, joka tutkii jokaisen solun, varmistaa sen sisällön ja soveltaa sitten luokkaa asianmukaisesti. Se on tuottava menetelmä tiettyjen solujen järjestämiseen niiden tietojen mukaan.

Sovelluksen jälkeen aktiivinen luokkaan solujen osajoukkoon, tämän luokan sisältävien solujen lukumäärän laskeminen voi olla usein seuraava askel. Jos haluat aloittaa tapahtuman tai toiminnon, tällainen modaalin avaaminen, joka näyttää lukumäärän, näiden solujen laskeminen voi olla varsin hyödyllistä.

Tämä opetusohjelma opettaa sinulle, kuinka JavaScriptin avulla lasketaan niiden solujen määrä, joissa on aktiivinen luokassa ja käynnistää automaattisesti modaalin, joka näyttää määrän. Käyttämällä jQuery, ratkaisu on suoraviivainen, tehokas ja helppo toteuttaa.

Käsikirjoituksen ymmärtäminen: Solujen laskeminen ja modaalin käynnistäminen

Ensimmäisessä komentosarjaesimerkissä jokainen taulukon solu iteroidaan, sen sisältö arvioidaan ja luokka määritetään arvioinnin mukaan käyttämällä jQuery. Tämä ominaisuus on mahdollista iteroimalla kunkin taulukon kohteet käyttämällä .each() menetelmä. Säännöllisiä lausekkeita käytetään kahden ehdollisen tarkistuksen soveltamiseen tämän silmukan sisällä. Nämä mallit varmistavat, noudattaako kunkin solun sisältö tiettyä muotoa. Solu saa aktiivinen luokkaan, jos sisältö noudattaa kaavaa, kuten numeroa ja isoa kirjainta. Tämä on välttämätöntä, jotta solut voidaan luokitella dynaamisesti.

kanssa RegExp() konstruktori, muodostetaan säännöllinen lauseke vastaaville numeroille ja kirjaimille. Tämä tekniikka varmistaa, että solut, joissa on dataa, kuten "1A" tai "3C", tunnistetaan ja merkitään nykyisellä luokalla. Solu saa erillisen luokan nimeltä ei yhtään jos sisältö vastaa eri mallia, esimerkiksi "c" ja sen jälkeen numero. Näin taulukon tiedot voidaan luokitella tarkemmin. Lisäksi, addClass() menetelmä takaa, että solut voivat lisätä nämä luokat poistamatta niitä mahdollisesti jo olevia luokkia.

Seuraava vaihe on laskea sopivat solut ja aloittaa modaali sen jälkeen, kun ne kaikki on merkitty aktiivisella luokalla. Joka kerta kun solu saa aktiivisen luokan, määrä kasvaa ja tallennetaan nimettyyn muuttujaan aktiivinen määrä. Taulukon kelvollisten solujen lukumäärä on määritettävä tämän luvun avulla. Käyttämällä .dialog() funktion jQuery-käyttöliittymästä, modaali luodaan, kun laskenta on valmis. The autoOpen: totta attribuutti sallii modaalin avautua automaattisesti. Aktiivisten solujen lukumäärä näkyy modaalin sisällä.

Toisessa tapauksessa vanilja JavaScriptiä käytetään kopioimaan identtinen menettely. querySelectorAll() käytetään jQueryn sijasta tässä lähestymistavassa kaikkien taulukon solujen valitsemiseen, ja se on yksinkertainen jokaiselle () silmukka iteroituu jokaisen solun läpi. Säännöllisiä lausekkeita käytetään vastaamaan solun sisältöä, aivan kuten jQuery-ratkaisussa. Jos vastaavuus löydetään, activeCount päivitetään ja aktiivinen luokka lisätään käyttämällä classList.add() menetelmä. Lopulta DOM:n ennalta määritetyn modaalielementin sisäisen HTML-koodin muuttaminen aktivoi modaalin. Sama tulos kuin jQuery-esimerkissä saavutetaan tällä ratkaisulla, joka ei ole riippuvainen ulkopuolisista kirjastoista.

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

Solujen valinnan ja luokan käsittelyn laajentaminen JavaScriptissä

kanssa JavaScript ja HTML-taulukoita sisältää myös mahdollisuuden muokata luokkia dynaamisesti käyttäjän syötteen tai sisällön perusteella. Voit tehdä muutakin kuin vain laskea soluja; Voit myös käsitellä käyttäjien syötteitä ja muuttaa taulukon sisältöä välittömästi. Esimerkiksi käyttämällä menetelmiä, kuten removeClass() jQueryssä tai classList.remove() vanilla JavaScriptissä voit muokata luokkaa dynaamisesti, korostaa tai jopa poistaa luokan, kun käyttäjä napsauttaa taulukon solua. Taulukot muuttuvat tämän seurauksena huomattavasti interaktiivisemmiksi, ja lisäräätälöinti reaaliaikaisten sisältöpäivitysten perusteella on mahdollista.

Reaaliaikaista dataa näyttävä taulukko, jossa tietyt solut on erotettava visuaalisesti luokan muutoksesta riippuen, olisi hyödyllinen käyttötapa tähän. Näitä muutoksia aiheuttavia toimintoja on helppo sitoa käyttämällä tapahtumakuuntelijoita. Esimerkiksi JavaScriptissä voit käyttää addEventListener() kuunnellaksesi tapahtumia tietyissä soluissa, kuten napsautuksia tai näppäinpainalluksia. Lisää luokkamuutoksia tai jopa päivityksiä laskuriin, joka heijastaa lukumäärää aktiivinen taulukon solut voivat johtua tästä vuorovaikutuksesta.

Voit myös miettiä tilanteita, joissa solujen pitäisi päivittää automaattisesti ilman käyttäjän syötteitä. Taulukon sisältöä voidaan päivittää ja seurata jatkuvasti intervallin tai AJAX-kutsujen avulla. Säännölliset lausekkeet ja menetelmät, kuten setInterval() sallia taulukon vaihtaa automaattisesti luokkiaan ja käynnistää modaali, kun kynnys saavutetaan. Taulukoita voidaan nyt käyttää dynaamisemmissa sovelluksissa, kuten kojelaudoissa ja dataohjatuissa asetuksissa.