如何在 JavaScript 中使用特定类来计算表格单元格数量

对特定类别的单元格进行计数并触发模态

此方法对具有给定类别的项目进行计数，并使用以下方法动态为其分配类别 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); } });
});

替代方案：使用 Vanilla JavaScript 计算活动单元格数量

该解决方案不依赖 jQuery 等第三方库，而是添加一个类并使用 纯JavaScript。

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

后端方法：将 Node.js 和 Express 与 EJS 模板结合使用

这 Node.js 示例用途 EJS 模板 在模式窗口中呈现单元格计数，同时对服务器端的单元格进行计数。

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

使用 Jest 对后端解决方案进行单元测试

在这里，我们使用 Node.js 解决方案开发单元测试 笑话 使活动计数逻辑按预期运行。

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 类处理和单元格计数的常见问题

1. 在普通 JavaScript 中，如何计算属于特定类的组件？
2. 要选择该类的每个元素，请使用 document.querySelectorAll('.className');要计算它们，请使用 length。
3. 根据表格单元格的内容，如何向其添加类？
4. 您可以使用以下方式申请课程 classList.add() 并使用检查单元格的内容 textContent 或者 innerText 特性。
5. 有什么区别 text() 在普通 JavaScript 中来自 textContent 在 jQuery 中？
6. textContent 是原生 JavaScript 属性，并且 text() 是一个 jQuery 方法，用于检索或修改所选元素的内容。
7. 当计算属于特定类别的单元格时，如何启动模式？
8. 要在 jQuery 中构造一个模式并让它根据特定类的项目数量触发，请使用 .dialog()。
9. 在 JavaScript 中，如何从元素中取出类？
10. 在普通 JavaScript 中，您可以使用 classList.remove('className') 从元素中删除类。

关于细胞计数和模态的最终想法

JavaScript 或 jQuery 可用于管理具有指定类的计数单元格，例如 积极的，以有效的方式。正则表达式是识别表内容模式的有用工具，有助于动态类分配和其他交互。

此外，通知用户表格状态的一种有用方法是根据这些活动单元格的数量启动模式。这 。对话（） jQuery 中的函数或自定义模式是两种在处理表格内容时提供大量多功能性的方法。