Як використовувати певний клас у JavaScript для підрахунку клітинок таблиці

Запуск Modal із підрахунком активних класів у таблиці

Ви можете застосувати настроювану поведінку на основі вмісту кожної клітинки під час роботи Таблиці HTML. Наприклад, ви можете використовувати певні шаблони або критерії для динамічного призначення класів клітинкам таблиці. В результаті ваш стіл може стати більш корисним і привабливим.

У цьому прикладі клітинки таблиці, які задовольняють певні вимоги, матимуть назву класу активний додано до них. А JavaScript Для цього використовується функція, яка перевіряє кожну комірку, перевіряє її вміст, а потім застосовує клас належним чином. Це продуктивний метод організації окремих комірок відповідно до їхніх даних.

Після застосування активний до підмножини клітинок, підрахунок кількості клітинок, які мають цей клас, може бути частим наступним кроком. Якщо ви бажаєте розпочати подію чи дію, відкриття режиму, який показує підрахунок, може бути дуже корисним.

Цей підручник навчить вас, як використовувати JavaScript для підрахунку кількості клітинок, які мають активний класу та автоматично запускати модаль, яка показує кількість. Використання jQuery, рішення просте, ефективне та просте у реалізації.

Розуміння сценарію: підрахунок клітинок і запуск модального режиму

У першому прикладі сценарію кожна клітинка таблиці повторюється, її вміст оцінюється, і клас призначається залежно від оцінки за допомогою jQuery. Ця функція стала можливою завдяки ітерації кожного з елементів у таблиці за допомогою .кожний() метод. Регулярні вирази використовуються для застосування двох умовних перевірок у цьому циклі. Ці шаблони визначають, чи вміст кожної клітинки відповідає певному формату. Клітина отримує активний клас, якщо вміст відповідає шаблону, наприклад цифрі та великій літері. Це важливо для динамічної категоризації клітинок.

З RegExp() конструктор, будується регулярний вираз для відповідності чисел, за якими йдуть літери. Ця техніка гарантує, що клітинки з даними, як-от «1A» або «3C», розпізнаються та позначаються поточним класом. Комірка отримує окремий клас під назвою немає якщо вміст збігається з іншим шаблоном, наприклад "c" і число. Це дає змогу більш точно класифікувати дані в таблиці. Крім того, addClass() метод гарантує, що ці класи можна додати до клітинок, не видаляючи класи, які вони вже мають.

Наступним кроком є ​​підрахунок відповідних комірок і ініціювання модальності після того, як усі вони будуть позначені активним класом. Щоразу, коли комірка отримує активний клас, кількість збільшується та зберігається у змінній з назвою activeCount. Кількість кваліфікованих комірок у таблиці має бути встановлено за допомогою цього підрахунку. Використовуючи .dialog() функції з jQuery UI, після завершення підрахунку генерується модальне значення. The autoOpen: правда атрибут дозволяє модальному відкриватися автоматично. Кількість активних клітинок показано всередині модального.

У другому випадку для дублювання ідентичної процедури використовується ванільний JavaScript. querySelectorAll() використовується замість jQuery в цьому підході для вибору всіх комірок таблиці та простого forEach() цикл повторює кожну клітинку. Регулярні вирази використовуються для відповідності вмісту комірки, як і в рішенні jQuery. Якщо збіг виявлено, activeCount оновлюється, а активний клас додається за допомогою classList.add() метод. Зрештою, зміна внутрішнього HTML попередньо визначеного модального елемента в DOM активує модаль. За допомогою цього рішення, яке не покладається на зовнішні бібліотеки, досягається той самий результат, що й у прикладі jQuery.

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

Розширення вибору клітинок і обробки класів у JavaScript

Робота з JavaScript і Таблиці HTML також передбачає можливість динамічно змінювати класи у відповідь на введення користувача або вміст. Ви можете робити більше, ніж просто рахувати клітинки; ви також можете обробляти введені користувачем дані та миттєво змінювати вміст таблиці. Наприклад, використовуючи такі методи, як removeClass() в jQuery або classList.remove() у ванільному JavaScript ви можете динамічно змінювати клас, виділяти або навіть видаляти клас, коли користувач клацає комірку таблиці. В результаті таблиці стають значно більш інтерактивними, і можлива подальша настройка на основі оновлень вмісту в режимі реального часу.

Таблиця, що відображає дані в реальному часі, де конкретні комірки потрібно візуально відокремити залежно від зміни класу, буде корисним варіантом використання для цього. Зв’язати функції, які викликають ці зміни, просто за допомогою прослуховувачів подій. У JavaScript, наприклад, ви можете використовувати addEventListener() щоб прослуховувати події в окремих клітинках, наприклад клацання або натискання клавіш. Додаткові модифікації класу або навіть оновлення лічильника, що відображає кількість активний клітинок у таблиці може виникнути в результаті цієї взаємодії.

Ви також можете подумати про ситуації, коли комірки повинні оновлюватися автоматично без будь-якого введення з боку користувача. Вміст таблиці можна оновлювати та постійно контролювати за допомогою викликів інтервалу або AJAX. Регулярні вирази та методи, наприклад setInterval() дозволити таблиці автоматично змінювати свої класи та запускати модальний режим, коли досягнуто порогове значення. Тепер таблиці можна використовувати в більш динамічних додатках, таких як інформаційні панелі та налаштування, керовані даними.