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

Active

Wyzwalanie modalu z liczbą aktywnych klas w tabeli

Podczas pracy możesz zastosować niestandardowe zachowanie w oparciu o zawartość każdej komórki . 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 do nich dodane. A 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 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 class i automatycznie uruchomić moduł pokazujący liczbę. Używanie rozwiązanie jest proste, wydajne i proste we wdrożeniu.

Rozkaz Przykład użycia
.each() Każdy element w zestawie dopasowanych elementów jest iterowany przez tę funkcję jQuery. Stosuje logikę warunkową lub klasy poprzez iterację po każdej komórce tabeli () in our example.
dodajKlasę() The selected items receive one or more class names added to them by this jQuery method. The script applies the Lub klasę do komórek zgodnie z ich zawartością.
.dialog() Used with jQuery UI to generate a modal dialog. When the script triggers the modal, the autoOpen: true option makes sure it opens automatically and shows the number of active items.
.tekst() The text content of the chosen components is retrieved or set using this technique. In this instance, it checks to see if the contents of every komórka pasuje do określonego wzorca.
RegExp() Wyrażenia regularne tworzy się za pomocą tego konstruktora JavaScript. Skrypt może przypisywać klasy na podstawie treści, identyfikując wzorce takie jak Lub .
classList.add() Ta podstawowa technika JavaScript nadaje elementowi określoną klasę. Działa podobnie do addClass() jQuery w waniliowym rozwiązaniu JavaScript, dodając Lub klasa w zależności od warunków.
DOMContentLoaded Po zakończeniu ładowania i analizowania dokumentu HTML wyzwalane jest zdarzenie DOMContentLoaded. W waniliowym przykładzie JavaScript upewnia się, że skrypt zostanie wykonany po zakończeniu ładowania modelu DOM.
querySelectorAll() Każdy element dokumentu pasujący do danego selektora CSS jest zwracany przez tę funkcję JavaScript. W podstawowym przykładzie JavaScript służy do wybierania każdego element in the table for further processing.
dla każdego() An array method in JavaScript that lets you iterate over elements. Here, it's utilized to iterate over every table cell that querySelectorAll() returned and apply the required logic to each one.

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ą . Ta funkcja jest możliwa dzięki iteracji po każdym z nich

pozycje w tabeli za pomocą 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 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 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 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, 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 . Na podstawie tego zliczenia należy ustalić liczbę kwalifikujących się komórek w tabeli. Korzystanie z funkcji z interfejsu użytkownika jQuery, po zakończeniu liczenia generowany jest modal. The 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. jest używany zamiast jQuery w tym podejściu do wybierania wszystkich komórek tabeli i jest prosty 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 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.

Zliczanie komórek o określonej klasie i wyzwalanie modalu

Metoda ta zlicza elementy posiadające daną klasę i dynamicznie przypisuje do nich klasy za pomocą . Następnie otwiera okno modalne.

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

Alternatywa: użycie Vanilla JavaScript do zliczania aktywnych komórek

Zamiast polegać na bibliotekach innych firm, takich jak jQuery, to rozwiązanie dodaje klasę i zlicza używane komórki .

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

Podejście backendowe: używanie Node.js i Express z szablonami EJS

Ten przykładowe zastosowania do renderowania liczby komórek w oknie modalnym podczas liczenia komórek po stronie serwera.

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'));

Testowanie jednostkowe za pomocą Jest for Backend Solution

Tutaj rozwijamy testy jednostkowe dla rozwiązania Node.js przy użyciu aby aktywna logika zliczania działała zgodnie z przeznaczeniem.

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 I 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 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ć 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ę 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 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.

  1. Jak w waniliowym JavaScript mogę policzyć komponenty należące do określonej klasy?
  2. Aby wybrać każdy element z tą klasą, użyj ; aby je policzyć, użyj .
  3. Jak mogę dodać do niej klasę, bazując na zawartości komórki tabeli?
  4. Możesz zastosować klasę za pomocą i sprawdź zawartość komórki za pomocą Lub właściwości.
  5. Co wyróżnia w waniliowym JavaScript z w jQuery?
  6. jest natywną właściwością JavaScript, oraz to metoda jQuery, która pobiera lub modyfikuje zawartość wybranych elementów.
  7. Licząc komórki należące do określonej klasy, jak mogę uruchomić modal?
  8. Aby skonstruować modal w jQuery i ustawić jego wyzwalanie w zależności od liczby elementów w określonej klasie, użyj .
  9. Jak w JavaScript mogę wyciągnąć klasę z elementu?
  10. W waniliowym JavaScript możesz użyć aby usunąć klasę z elementu.

Do zarządzania zliczaniem komórek o określonej klasie można użyć JavaScript lub jQuery, np , w skuteczny sposób. Wyrażenia regularne są użytecznym narzędziem do identyfikowania wzorców w zawartości tabeli, co ułatwia dynamiczne przypisywanie klas i inne interakcje.

Ponadto użyteczną metodą informowania użytkowników o statusie tabeli jest inicjowanie modalu na podstawie liczby aktywnych komórek. The funkcja w jQuery lub niestandardowy modal to dwie metody zapewniające dużą wszechstronność, jeśli chodzi o obsługę zawartości tabeli.

  1. Informacje na temat dynamicznego dodawania klas i obsługi treści przy użyciu JavaScript i jQuery zostały zaczerpnięte ze szczegółowego poradnika dostępnego na stronie Dokumentacja API jQuery .
  2. Informacje na temat używania wyrażeń regularnych w JavaScript do manipulowania treścią można znaleźć w dokumentacji dostępnej pod adresem Dokumenty internetowe MDN .
  3. Tworzenie modalne przy użyciu metody jQuery UI Dialog i jej szczegółowe wykorzystanie można zbadać pod adresem Dokumentacja okna dialogowego interfejsu użytkownika jQuery .
  4. Znaczenie liczenia elementów za pomocą określonych klas w JavaScript i praktycznych przykładach można przejrzeć w artykułach takich jak Przewodnik po JavaScript w FreeCodeCamp .