Como usar uma classe específica em JavaScript para contar células de uma tabela

Acionando um Modal com Contagem de Classes Ativas em uma Tabela

Você pode desejar aplicar um comportamento personalizado com base no conteúdo de cada célula ao trabalhar com Tabelas HTML. Por exemplo, você pode usar padrões ou critérios específicos para atribuir classes dinamicamente às células da tabela. Como resultado, sua mesa pode se tornar mais útil e envolvente.

Neste exemplo, as células da tabela que atendem a determinados requisitos terão uma classe chamada ativo adicionado a eles. UM JavaScript A função que examina cada célula, verifica seu conteúdo e depois aplica a classe apropriadamente é usada para fazer isso. É um método produtivo de organizar células específicas de acordo com seus dados.

Depois de aplicar o ativo classe para um subconjunto de células, contar o número de células que possuem essa classe pode ser uma próxima etapa frequente. Se você deseja iniciar um evento ou ação, como abrir um modal que mostre a contagem, contar essas células pode ser bastante útil.

Este tutorial ensinará como usar JavaScript para contar o número de células que possuem o ativo class e para lançar automaticamente um modal que mostra a contagem. Usando jQuery, a solução é direta, eficiente e simples de implementar.

Compreendendo o script: contando células e acionando um modal

No primeiro exemplo de script, cada célula da tabela é iterada, seu conteúdo é avaliado e uma classe é atribuída dependendo da avaliação usando jQuery. Esse recurso é possível iterando cada um dos itens da tabela usando o .cada() método. Expressões regulares são usadas para aplicar duas verificações condicionais dentro deste loop. Esses padrões verificam se o conteúdo de cada célula segue um formato específico. A célula ganha o ativo class se o conteúdo seguir um padrão, como um número e uma letra maiúscula. Para que as células sejam categorizadas dinamicamente, isso é essencial.

Com o RegExp() construtor, uma expressão regular para números correspondentes seguidos de letras é construída. Essa técnica garante que as células com dados, como “1A” ou “3C”, sejam reconhecidas e rotuladas com a classe atual. A célula recebe uma classe separada chamada nenhum se o conteúdo corresponder a um padrão diferente, "c" seguido de um número. Isso permite classificar os dados da tabela com mais precisão. Além disso, o addClass() O método garante que as células possam ter essas classes adicionadas sem excluir nenhuma classe que já possuam.

A próxima etapa é contar as células apropriadas e iniciar um modal depois de todas terem sido marcadas com a classe ativa. Cada vez que uma célula obtém a classe ativa, a contagem é incrementada e salva em uma variável chamada contagem ativa. O número de células qualificadas na tabela deve ser determinado usando esta contagem. Usando o .diálogo() função do jQuery UI, um modal é gerado quando a contagem é concluída. O abertura automática: verdadeiro atributo permite que o modal abra automaticamente. O número de células ativas é mostrado dentro do modal.

No segundo caso, Vanilla JavaScript é usado para duplicar o procedimento idêntico. querySelectorAll() é usado no lugar do jQuery nesta abordagem para selecionar todas as células da tabela e uma abordagem direta para cada() loop itera através de cada célula. Expressões regulares são utilizadas para corresponder ao conteúdo da célula, assim como na solução jQuery. Se uma correspondência for descoberta, o activeCount será atualizado e a classe ativa será adicionada usando o método classList.add() método. Em última análise, alterar o HTML interno de um elemento modal predefinido no DOM ativa o modal. O mesmo resultado do exemplo jQuery é alcançado usando esta solução, que não depende de bibliotecas externas.

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

Expandindo a seleção de células e manipulação de classes em JavaScript

Trabalhando com JavaScript e Tabelas HTML também envolve a capacidade de modificar classes dinamicamente em resposta à entrada ou conteúdo do usuário. Você pode fazer mais do que apenas contar as células; você também pode manipular as entradas do usuário e alterar instantaneamente o conteúdo da tabela. Por exemplo, usando métodos como removeClass() em jQuery ou classList.remove() no Vanilla JavaScript, você pode modificar dinamicamente a classe, realçar ou até mesmo remover a classe quando um usuário clica em uma célula da tabela. Como resultado, as tabelas tornam-se consideravelmente mais interativas e é possível uma maior personalização com base em atualizações de conteúdo em tempo real.

Uma tabela exibindo dados em tempo real onde células específicas precisam ser separadas visualmente dependendo de uma mudança de classe seria um caso de uso útil para isso. É simples vincular funções que causam essas modificações usando ouvintes de eventos. Em JavaScript, por exemplo, você pode usar addEventListener() para ouvir eventos em células específicas, como cliques ou pressionamentos de teclas. Modificações adicionais de classe ou até mesmo atualizações em um contador que reflete o número de ativo células na tabela podem resultar dessa interação.

Você também pode pensar em situações em que as células devem ser atualizadas automaticamente sem qualquer intervenção do usuário. O conteúdo da tabela pode ser atualizado e monitorado continuamente por meio de intervalos ou chamadas AJAX. Expressões regulares e métodos como setInterval() permitir que a tabela altere automaticamente suas classes e inicie um modal quando um limite for atingido. As tabelas agora podem ser usadas em aplicativos mais dinâmicos, como painéis e configurações baseadas em dados.