Egy adott osztály használata a JavaScriptben a táblázatcellák számlálásához

Modal aktiválása aktív osztályszámmal egy táblázatban

Érdemes lehet egyéni viselkedést alkalmazni az egyes cellák tartalma alapján, amikor dolgozik HTML táblázatok. Használhat például meghatározott mintákat vagy feltételeket az osztályok dinamikus hozzárendeléséhez a táblázatcellákhoz. Ennek eredményeként az asztal hasznosabbá és vonzóbbá válhat.

Ebben a példában azoknak a táblázatcelláknak, amelyek megfelelnek bizonyos követelményeknek, egy osztály neve lesz aktív hozzájuk. A JavaScript Ehhez olyan függvényt használunk, amely megvizsgálja az egyes cellákat, ellenőrzi azok tartalmát, majd megfelelően alkalmazza az osztályt. Ez egy produktív módszer bizonyos sejtek adataik szerinti rendszerezésére.

Alkalmazása után a aktív osztályt a cellák egy részhalmazához, az ilyen osztályt tartalmazó cellák számának megszámlálása gyakori következő lépés lehet. Ha eseményt vagy akciót szeretne elindítani, akkor egy ilyen modális megnyitása, amely a számlálást mutatja, ezeknek a celláknak a megszámlálása nagyon hasznos lehet.

Ez az oktatóanyag megtanítja Önnek, hogyan használhatja a JavaScriptet a következővel rendelkező cellák számának megszámlálásához aktív osztályba, és automatikusan elindít egy modált, amely a számlálást mutatja. Használata jQuery, a megoldás egyszerű, hatékony és egyszerűen megvalósítható.

A forgatókönyv értelmezése: Cellák számlálása és egy modál aktiválása

Az első szkriptpéldában minden táblacella ismétlődik, tartalma kiértékelődik, és a kiértékeléstől függően osztály kerül hozzárendelésre jQuery. Ez a funkció az egyes elemekkel a táblázatban .minden() módszer. A reguláris kifejezések két feltételes ellenőrzés alkalmazására szolgálnak ezen a cikluson belül. Ezek a minták megállapítják, hogy az egyes cellák tartalma megfelel-e egy adott formátumnak. A sejt elnyeri a aktív osztályba, ha a tartalom mintát követ, például számot és nagybetűt. A cellák dinamikus kategorizálásához ez elengedhetetlen.

A RegExp() konstruktor, akkor egy reguláris kifejezés jön létre a számok és a betűk közötti egyező kifejezésekhez. Ez a technika biztosítja, hogy az adatokat tartalmazó cellák, például „1A” vagy „3C”, felismerésre és az aktuális osztályra címkézve legyenek. A cella egy külön osztályt kap, az úgynevezett egyik sem ha a tartalom egy másik mintára egyezik, akkor a „c” jelet egy szám követi. Ez lehetővé teszi az adatok pontosabb osztályozását a táblázatban. Továbbá a addClass() A metódus garantálja, hogy a cellák hozzáadhatják ezeket az osztályokat anélkül, hogy törölnék a már meglévő osztályokat.

A következő lépés a megfelelő cellák megszámlálása és a modális kezdeményezése, miután mindegyiket megcímkézték az aktív osztállyal. Minden alkalommal, amikor egy cella megkapja az aktív osztályt, a szám növekszik, és elmentődik egy nevű változóba activeCount. A táblázatban szereplő minősítő cellák számát ezzel a számmal kell megállapítani. A .párbeszéd() függvényt a jQuery UI-ból, egy modális generálódik, amikor a számlálás befejeződött. A autoOpen: igaz attribútum lehetővé teszi a modális automatikus megnyitását. Az aktív cellák száma a modális belsejében látható.

A második esetben a vanília JavaScriptet használják az azonos eljárás megkettőzésére. querySelectorAll() Ebben a megközelítésben a jQuery helyett az összes táblázatcella kijelölésére szolgál, és egy egyszerű forEach() ciklus iterál minden cellán keresztül. A cellatartalomhoz reguláris kifejezéseket használnak, akárcsak a jQuery megoldásban. Ha egyezést észlel, az activeCount frissül, és az aktív osztály hozzáadódik a következővel classList.add() módszer. Végső soron egy előre meghatározott modális elem belső HTML-kódjának megváltoztatása a DOM-ban aktiválja a modált. A jQuery példával megegyező eredmény érhető el ezzel a megoldással, amely nem támaszkodik külső könyvtárakra.

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

A cellakiválasztás és az osztálykezelés bővítése a JavaScriptben

Dolgozik vele JavaScript és HTML táblázatok magában foglalja az osztályok dinamikus módosításának lehetőségét is a felhasználói bevitel vagy tartalom alapján. Többet is tehet, mint pusztán a sejteket számolni; kezelheti a felhasználói beviteleket is, és azonnal módosíthatja a táblázat tartalmát. Például olyan módszerekkel, mint removeClass() jQuery-ben ill classList.remove() a vanilla JavaScriptben dinamikusan módosíthatja az osztályt, kiemelheti vagy akár eltávolíthatja az osztályt, amikor a felhasználó rákattint egy táblázatcellára. Ennek köszönhetően a táblázatok lényegesen interaktívabbakká válnak, és a tartalom valós idejű frissítésén alapuló további testreszabás lehetséges.

Ehhez hasznos lehet egy valós idejű adatokat megjelenítő táblázat, ahol az egyes cellákat vizuálisan el kell különíteni az osztályváltozástól függően. Az ilyen módosításokat okozó függvényeket eseményfigyelők segítségével egyszerűen össze lehet kötni. Például JavaScriptben használhatja addEventListener() bizonyos cellákon zajló események, például kattintások vagy billentyűlenyomások figyelésére. További osztálymódosítások vagy akár frissítések egy számlálóhoz, amely tükrözi a számát aktív a táblázat cellái ebből a kölcsönhatásból származhatnak.

Elgondolkodhat azon helyzeteken is, amikor a cellák automatikusan frissülnek, a felhasználó bármiféle bevitele nélkül. A táblázat tartalma intervallumon vagy AJAX-hívásokon keresztül folyamatosan frissíthető és figyelhető. A reguláris kifejezések és módszerek, mint pl setInterval() lehetővé teszi a táblázat számára, hogy automatikusan megváltoztassa az osztályait, és elindítson egy modált, amikor elér egy küszöböt. A táblázatok mostantól dinamikusabb alkalmazásokban is használhatók, például irányítópultokban és adatvezérelt beállításokban.