Jak używać określonej klasy w JavaScript do liczenia komórek tabeli

Wyzwalanie modalu z liczbą aktywnych klas w tabeli

Podczas pracy możesz zastosować niestandardowe zachowanie w oparciu o zawartość każdej komórki Tabele HTML. Można na przykład użyć określonych wzorców lub kryteriów, aby dynamicznie przypisywać klasy do komórek tabeli. Dzięki temu Twój stół może stać się bardziej użyteczny i wciągający.

W tym przykładzie komórki tabeli spełniające określone wymagania będą miały nazwę klasy aktywny do nich dodane. A JavaScript Służy do tego funkcja, która sprawdza każdą komórkę, weryfikuje jej zawartość, a następnie odpowiednio stosuje klasę. Jest to produktywna metoda organizowania poszczególnych komórek według ich danych.

Po zastosowaniu aktywny class do podzbioru komórek, kolejnym częstym krokiem może być zliczenie liczby komórek mających tę klasę. Jeśli chcesz rozpocząć wydarzenie lub akcję, bardzo pomocne może być otwarcie modalu pokazującego liczbę, zliczenie tych komórek.

W tym samouczku dowiesz się, jak używać JavaScript do liczenia komórek zawierających aktywny class i automatycznie uruchomić moduł pokazujący liczbę. Używanie jQueryrozwiązanie jest proste, wydajne i proste we wdrożeniu.

Zrozumienie skryptu: liczenie komórek i wyzwalanie modalu

W pierwszym przykładzie skryptu iterowana jest każda komórka tabeli, oceniana jest jej zawartość i przydzielana jest klasa w zależności od oceny za pomocą jQuery. Ta funkcja jest możliwa dzięki iteracji po każdym z nich pozycje w tabeli za pomocą .każdy() metoda. Wyrażenia regularne służą do stosowania dwóch kontroli warunkowych w tej pętli. Wzorce te sprawdzają, czy zawartość każdej komórki jest zgodna z określonym formatem. Komórka zyskuje aktywny class, jeśli treść jest zgodna ze wzorcem, takim jak liczba i wielka litera. Jest to niezbędne, aby komórki mogły być dynamicznie kategoryzowane.

Z RegExp() konstruktora, konstruowane jest wyrażenie regularne pasujące do liczb, po których następują litery. Ta technika gwarantuje, że komórki zawierające dane, takie jak „1A” lub „3C”, zostaną rozpoznane i oznaczone bieżącą klasą. Komórka otrzymuje osobną klasę tzw nic jeśli treść pasuje do innego wzorca, np. „c”, po którym następuje liczba. Dzięki temu możliwa jest bardziej precyzyjna klasyfikacja danych w tabeli. Ponadto, dodajKlasę() Metoda gwarantuje, że do komórek można dodać te klasy bez usuwania klas, które już posiadają.

Następnym krokiem jest policzenie odpowiednich komórek i zainicjowanie modalu po oznaczeniu ich aktywną klasą. Za każdym razem, gdy komórka uzyskuje aktywną klasę, liczba jest zwiększana i zapisywana w zmiennej o nazwie liczba aktywnych. Na podstawie tego zliczenia należy ustalić liczbę kwalifikujących się komórek w tabeli. Korzystanie z .dialog() funkcji z interfejsu użytkownika jQuery, po zakończeniu liczenia generowany jest modal. The autoOpen: prawda atrybut umożliwia automatyczne otwarcie modalu. Liczba aktywnych komórek jest pokazana wewnątrz modalu.

W drugim przypadku do powielenia identycznej procedury używany jest waniliowy JavaScript. zapytanieSelectorAll() jest używany zamiast jQuery w tym podejściu do wybierania wszystkich komórek tabeli i jest prosty dla każdego() pętla iteruje po każdej komórce. Do dopasowania zawartości komórki wykorzystywane są wyrażenia regularne, podobnie jak w rozwiązaniu jQuery. W przypadku wykrycia dopasowania wartość activeCount jest aktualizowana i dodawana jest aktywna klasa za pomocą metody lista klas.add() metoda. Ostatecznie zmiana wewnętrznego kodu HTML predefiniowanego elementu modalnego w DOM aktywuje modal. Ten sam wynik, co w przykładzie jQuery, osiąga się przy użyciu tego rozwiązania, które nie opiera się na bibliotekach zewnętrznych.

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

Rozwijanie wyboru komórek i obsługi klas w JavaScript

Praca z JavaScript I Tabele HTML obejmuje również możliwość dynamicznego modyfikowania klas w odpowiedzi na dane wejściowe lub treść użytkownika. Możesz zrobić więcej niż tylko policzyć komórki; możesz także obsługiwać dane wejściowe użytkownika i natychmiast zmieniać zawartość tabeli. Na przykład, używając metod takich jak removeClass() w jQuery lub classList.remove() w waniliowym JavaScript możesz dynamicznie modyfikować klasę, wyróżniać, a nawet usuwać klasę, gdy użytkownik kliknie komórkę tabeli. W rezultacie tabele stają się znacznie bardziej interaktywne i możliwa jest dalsza personalizacja w oparciu o aktualizacje treści w czasie rzeczywistym.

Przydatnym przypadkiem użycia byłaby tabela wyświetlająca dane w czasie rzeczywistym, w której określone komórki muszą być wizualnie oddzielone w zależności od zmiany klasy. Powiązanie funkcji powodujących te modyfikacje jest proste przy użyciu detektorów zdarzeń. Na przykład w JavaScript możesz użyć addEventListener() do nasłuchiwania zdarzeń w określonych komórkach, takich jak kliknięcia lub naciśnięcia klawiszy. Dodatkowe modyfikacje klas lub nawet aktualizacje licznika odzwierciedlającego liczbę aktywny komórki w tabeli mogą wynikać z tej interakcji.

Możesz także pomyśleć o sytuacjach, w których komórki powinny aktualizować się automatycznie, bez żadnego udziału użytkownika. Zawartość tabeli można aktualizować i stale monitorować za pomocą wywołań interwałowych lub AJAX. Wyrażenia regularne i metody, takie jak setInterval() pozwól tabeli automatycznie zmienić swoje klasy i uruchomić modal po osiągnięciu progu. Tabeli można teraz używać w bardziej dynamicznych aplikacjach, takich jak pulpity nawigacyjne i ustawienia oparte na danych.