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

使用表中的活动类计数触发模态

您可能希望在使用时根据每个单元格的内容应用自定义行为 。例如，您可以使用特定模式或条件将类动态分配给表格单元格。因此，您的表格可能会变得更有用、更有吸引力。

在此示例中，满足某些要求的表格单元格将具有一个名为 添加到他们。一个 用于检查每个单元格、验证其内容，然后适当应用该类的函数用于执行此操作。这是根据数据组织特定单元的有效方法。

应用后 对细胞子集进行分类，计算具有此类的细胞数量可能是下一步常见的步骤。如果您希望启动一个事件或操作，例如打开显示计数的模式，对这些单元格进行计数可能会非常有帮助。

本教程将教您如何使用 JavaScript 来计算具有 类并自动启动显示计数的模式。使用 ，该解决方案简单、高效且易于实施。

命令	使用示例
.each()	该 jQuery 函数会迭代一组匹配元素中的每个元素。它通过迭代每个表格单元格来应用条件逻辑或类（	) in our example.
添加类（）	The selected items receive one or more class names added to them by this jQuery method. The script applies the 或者 根据单元格的内容对单元格进行分类。
。对话（）	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.
。文本（）	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	单元格匹配特定模式。
RegExp()	正则表达式是用这个 JavaScript 构造函数创建的。该脚本可以通过识别模式来根据内容分配类别，例如 或者 。
classList.add()	这种基本的 JavaScript 技术为元素提供了特定的类。它的功能与普通 JavaScript 解决方案中的 jQuery addClass() 类似，添加了 或者 班级视情况而定。
DOMContentLoaded	当 HTML 文档完成加载和解析时，将触发 DOMContentLoaded 事件。在普通 JavaScript 示例中，它确保脚本在 DOM 加载完成后执行。
querySelectorAll()	此 JavaScript 函数返回文档中与给定 CSS 选择器匹配的每个元素。在基本的 JavaScript 示例中，它用于选择每个	element in the table for further processing.
forEach()	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.

了解脚本：计算单元格并触发模态

在第一个脚本示例中，迭代每个表格单元格，评估其内容，并根据使用的评估分配一个类 。该功能是通过迭代每个

随着 构造函数，构造一个匹配数字后跟字母的正则表达式。此技术可确保包含数据（例如“1A”或“3C”）的单元格被识别并标记为当前类别。该单元接收一个单独的类，称为 如果内容匹配不同的模式，例如“c”后跟一个数字。这使得可以更精确地对表中的数据进行分类。此外， 方法保证单元可以添加这些类，而无需删除它们可能已经拥有的任何类。

下一步是计算适当的单元格数量，并在它们全部被标记为活动类后启动模式。每次单元格获得活动类时，计数都会增加并保存在名为的变量中 。必须使用此计数来确定表中合格单元格的数量。使用 jQuery UI 中的函数，计数完成后会生成一个模态。这 属性允许模式自动打开。活动单元格的数量显示在模式内部。

在第二种情况下，使用普通 JavaScript 来复制相同的过程。 在这种方法中使用 jQuery 来选择所有表格单元格，并且一个简单的 循环遍历每个单元格。正则表达式用于匹配单元格内容，就像 jQuery 解决方案中一样。如果发现匹配，则更新 activeCount 并使用以下命令添加活动类 方法。最终，更改 DOM 中预定义模态元素的内部 HTML 会激活模态。使用此解决方案实现了与 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 中扩展单元格选择和类处理

与...一起工作 和 还涉及动态修改类以响应用户输入或内容的能力。您可以做的不仅仅是计数细胞；还可以做更多的事情。您还可以处理用户输入并立即更改表的内容。例如，使用类似的方法 在 jQuery 中或 classList.remove() 在普通 JavaScript 中，当用户单击表格单元格时，您可以动态修改类、突出显示甚至删除类。因此，表格的交互性显着增强，并且可以根据内容的实时更新进行进一步的定制。

显示实时数据的表格，其中需要根据类更改在视觉上分隔特定单元格，这将是一个有用的用例。通过使用事件侦听器来绑定导致这些修改的函数很简单。例如，在 JavaScript 中，您可以使用 侦听特定单元格上的事件，例如单击或按键。额外的类修改，甚至更新反映数量的计数器 表中的单元格可能是由这种相互作用产生的。

您还可以考虑单元格应自动更新而不需要用户任何输入的情况。表内容可以通过间隔或 AJAX 调用持续更新和监控。正则表达式和方法，例如 允许表自动更改其类别并在达到阈值时启动模式。表格现在可以用于更动态的应用程序，例如仪表板和数据驱动的设置。

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

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

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