Com utilitzar una classe específica a JavaScript per comptar cel·les de la taula

Activació d'un modal amb recompte de classes actius en una taula

És possible que vulgueu aplicar un comportament personalitzat en funció del contingut de cada cel·la quan treballeu Taules HTML. Per exemple, podeu utilitzar patrons o criteris específics per assignar classes dinàmicament a les cel·les de la taula. Com a resultat, la vostra taula pot ser més útil i atractiva.

En aquest exemple, les cel·les de la taula que compleixen determinats requisits tindran una classe anomenada actiu afegits a ells. A JavaScript La funció que examina cada cel·la, verifica el seu contingut i després aplica la classe adequadament s'utilitza per fer-ho. És un mètode productiu per organitzar cèl·lules particulars segons les seves dades.

Després d'aplicar el actiu classe a un subconjunt de cel·les, comptar el nombre de cel·les que tenen aquesta classe podria ser un pas següent freqüent. Si voleu iniciar un esdeveniment o acció, com obrir un modal que mostri el recompte, comptar aquestes cel·les pot ser molt útil.

Aquest tutorial us ensenyarà com utilitzar JavaScript per comptar el nombre de cel·les que tenen actiu classe i per llançar automàticament un modal que mostra el recompte. Utilitzant jQuery, la solució és senzilla, eficient i senzilla d'implementar.

Entendre el guió: comptar cel·les i activar un modal

En el primer exemple d'script, cada cel·la de la taula s'itera, s'avalua el seu contingut i s'assigna una classe en funció de l'avaluació utilitzant jQuery. Aquesta característica és possible mitjançant la iteració de cadascun dels elements elements de la taula utilitzant el .cada () mètode. Les expressions regulars s'utilitzen per aplicar dues comprovacions condicionals dins d'aquest bucle. Aquests patrons determinen si el contingut de cada cel·la s'adhereix a un format determinat. La cèl·lula guanya el actiu classe si el contingut segueix un patró, com ara un número i una lletra majúscula. Perquè les cèl·lules es puguin categoritzar dinàmicament, això és essencial.

Amb el RegExp() constructor, es construeix una expressió regular per fer coincidir números seguits de lletres. Aquesta tècnica assegura que les cel·les amb dades, com ara "1A" o "3C", es reconeixen i s'etiqueten amb la classe actual. La cel·la rep una classe separada anomenada cap si el contingut coincideix amb un patró diferent, com "c" seguida d'un número. Això permet classificar les dades de la taula amb més precisió. A més, el addClass() El mètode garanteix que les cel·les poden afegir aquestes classes sense eliminar cap classe que ja tinguin.

El següent pas és comptar les cel·les adequades i iniciar un modal després que totes hagin estat etiquetades amb la classe activa. Cada vegada que una cel·la obté la classe activa, el recompte s'incrementa i es guarda en una variable anomenada compte actiu. El nombre de cel·les qualificatives de la taula s'ha de determinar mitjançant aquest recompte. Utilitzant el .dialog() funció de la interfície d'usuari de jQuery, es genera un modal quan finalitza el recompte. El autoOpen: cert L'atribut permet que el modal s'obri automàticament. El nombre de cel·les actives es mostra dins del modal.

En el segon cas, s'utilitza JavaScript vainilla per duplicar el procediment idèntic. querySelectorAll() s'utilitza en lloc de jQuery en aquest enfocament per seleccionar totes les cel·les de la taula, i una manera senzilla per cada() el bucle itera per cada cel·la. Les expressions regulars s'utilitzen per fer coincidir el contingut de la cel·la, igual que a la solució jQuery. Si es descobreix una coincidència, l'activeCount s'actualitza i la classe activa s'afegeix mitjançant l' classList.add() mètode. En última instància, alterar l'HTML intern d'un element modal predefinit al DOM activa el modal. El mateix resultat que l'exemple de jQuery s'aconsegueix amb aquesta solució, que no depèn de biblioteques externes.

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

Ampliació de la selecció de cel·les i el maneig de classes en JavaScript

Treballant amb JavaScript i Taules HTML també implica la capacitat de modificar dinàmicament les classes en resposta a l'entrada o contingut de l'usuari. Podeu fer més que comptar les cel·les; també podeu gestionar les entrades dels usuaris i canviar instantàniament el contingut de la taula. Per exemple, utilitzant mètodes com removeClass() en jQuery o classList.remove() a JavaScript vainilla, podeu modificar dinàmicament la classe, ressaltar-la o fins i tot eliminar-la quan un usuari fa clic a una cel·la de la taula. Com a resultat, les taules es tornen considerablement més interactives i és possible una personalització addicional basada en actualitzacions del contingut en temps real.

Una taula que mostri dades en temps real on les cel·les específiques s'han de separar visualment en funció d'un canvi de classe seria un cas d'ús útil per a això. És senzill enllaçar les funcions que provoquen aquestes modificacions mitjançant l'ús d'escoltes d'esdeveniments. En JavaScript, per exemple, podeu utilitzar addEventListener() per escoltar esdeveniments en cel·les concretes, com ara clics o pressions de tecles. Modificacions addicionals de classe o fins i tot actualitzacions a un comptador que reflecteixi el nombre de actiu cel·les de la taula poden resultar d'aquesta interacció.

També podeu pensar en situacions en què les cel·les s'han d'actualitzar automàticament sense cap intervenció de l'usuari. El contingut de la taula es pot actualitzar i controlar contínuament mitjançant un interval o trucades AJAX. Expressions regulars i mètodes com ara setInterval() permetre que la taula canviï automàticament les seves classes i iniciï un modal quan s'arribi a un llindar. Les taules ara es poden utilitzar en aplicacions més dinàmiques, com ara taulers i configuracions basades en dades.