Come utilizzare una classe specifica in JavaScript per contare le celle della tabella

Attivazione di un modale con conteggio delle classi attive in una tabella

Potresti voler applicare un comportamento personalizzato in base al contenuto di ciascuna cella quando lavori Tabelle HTML. Ad esempio, puoi utilizzare modelli o criteri specifici per assegnare dinamicamente le classi alle celle della tabella. Di conseguenza, la tua tabella potrebbe diventare più utile e coinvolgente.

In questo esempio, le celle della tabella che soddisfano determinati requisiti avranno una classe denominata attivo aggiunto ad essi. UN JavaScript A tale scopo viene utilizzata la funzione che esamina ogni cella, ne verifica il contenuto e quindi applica la classe in modo appropriato. È un metodo produttivo per organizzare celle particolari in base ai loro dati.

Dopo aver applicato il attivo classe in un sottoinsieme di celle, contare il numero di celle che hanno questa classe potrebbe essere un passaggio successivo frequente. Se desideri avviare un evento o un'azione, ad esempio aprire una finestra modale che mostra il conteggio, contare queste celle può essere molto utile.

Questo tutorial ti insegnerà come utilizzare JavaScript per contare il numero di celle che contengono il file attivo class e per avviare automaticamente una modale che mostra il conteggio. Utilizzando jQuery, la soluzione è diretta, efficiente e semplice da implementare.

Comprensione dello script: conteggio delle celle e attivazione di una modale

Nel primo esempio di script, ogni cella della tabella viene ripetuta, il suo contenuto viene valutato e viene assegnata una classe in base alla valutazione utilizzando jQuery. Questa funzionalità è resa possibile dall'iterazione di ciascuno dei file elementi nella tabella utilizzando il file .ogni() metodo. Le espressioni regolari vengono utilizzate per applicare due controlli condizionali all'interno di questo ciclo. Questi modelli accertano se il contenuto di ciascuna cella aderisce a un formato particolare. La cellula guadagna il attivo class se il contenuto segue uno schema, ad esempio un numero e una lettera maiuscola. Affinché le celle possano essere categorizzate dinamicamente, questo è essenziale.

Con il RegExp() costruttore, viene costruita un'espressione regolare per i numeri corrispondenti seguiti da lettere. Questa tecnica garantisce che le celle con dati, come "1A" o "3C", vengano riconosciute ed etichettate con la classe corrente. La cella riceve una classe separata chiamata nessuno se il contenuto corrisponde a uno schema diverso, ad esempio "c" seguito da un numero. Ciò consente di classificare i dati nella tabella in modo più preciso. Inoltre, il addClass() Il metodo garantisce che le celle possano aggiungere queste classi senza eliminare alcuna classe che potrebbero già avere.

Il passaggio successivo consiste nel contare le celle appropriate e avviare una modale dopo che sono state tutte contrassegnate con la classe attiva. Ogni volta che una cella ottiene la classe attiva, il conteggio viene incrementato e salvato in una variabile denominata activeCount. Il numero di celle qualificanti nella tabella deve essere accertato utilizzando questo conteggio. Utilizzando il .dialogo() funzione dall'interfaccia utente jQuery, viene generata una modale al termine del conteggio. IL apertura automatica: vero L'attributo consente al modale di aprirsi automaticamente. Il numero di celle attive viene mostrato all'interno del modale.

Nel secondo caso, viene utilizzato JavaScript vanilla per duplicare la procedura identica. querySelectorAll() viene utilizzato al posto di jQuery in questo approccio per selezionare tutte le celle della tabella e in modo semplice perOgni() il ciclo scorre ogni cella. Le espressioni regolari vengono utilizzate per abbinare il contenuto della cella, proprio come nella soluzione jQuery. Se viene rilevata una corrispondenza, activeCount viene aggiornato e la classe attiva viene aggiunta utilizzando il file listaclasse.add() metodo. In definitiva, alterando l'HTML interno di un elemento modale predefinito nel DOM si attiva il modale. Lo stesso risultato dell'esempio jQuery si ottiene utilizzando questa soluzione, che non si basa su librerie esterne.

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

Espansione sulla selezione delle celle e sulla gestione delle classi in JavaScript

Lavorare con JavaScript E Tabelle HTML implica anche la possibilità di modificare dinamicamente le classi in risposta all'input o al contenuto dell'utente. Puoi fare di più che contare semplicemente le celle; puoi anche gestire gli input dell'utente e modificare istantaneamente il contenuto della tabella. Ad esempio, utilizzando metodi come removeClass() in jQuery o classList.remove() in JavaScript Vanilla, puoi modificare dinamicamente la classe, evidenziare o persino rimuovere la classe quando un utente fa clic su una cella della tabella. Di conseguenza, le tabelle diventano notevolmente più interattive ed è possibile un'ulteriore personalizzazione basata sull'aggiornamento dei contenuti in tempo reale.

Una tabella che mostra dati in tempo reale in cui celle specifiche devono essere separate visivamente a seconda di un cambio di classe sarebbe un caso d'uso utile a questo scopo. È semplice associare le funzioni che causano queste modifiche utilizzando i listener di eventi. In JavaScript, ad esempio, puoi usare addEventListener() per ascoltare eventi su celle particolari, come clic o pressioni di tasti. Ulteriori modifiche alle classi o addirittura aggiornamenti a un contatore che riflette il numero di attivo le celle nella tabella possono risultare da questa interazione.

Puoi anche pensare a situazioni in cui le celle dovrebbero aggiornarsi automaticamente senza alcun input da parte dell'utente. Il contenuto della tabella può essere aggiornato e monitorato continuamente tramite un intervallo o chiamate AJAX. Espressioni regolari e metodi come setInterval() consentire alla tabella di cambiare automaticamente le sue classi e avviare una modale quando viene raggiunta una soglia. Le tabelle ora possono essere utilizzate in applicazioni più dinamiche, come dashboard e impostazioni basate sui dati.