如何统计HTML表格中带active类的单元格并触发自动打开的模态框？

云上老周

2026-6-17

解决方案

1. 优化现有单元格分类逻辑

先简化你原有的脚本，正则直接使用字面量更简洁，同时增加trim()避免空白字符干扰匹配：

$('td').each(function() {
  const cellText = $(this).text().trim();
  if (/^[0-9][A-Z]/.test(cellText)) {
    $(this).addClass('active');
  } else if (/^c[0-9]/.test(cellText)) {
    $(this).addClass('none');
  }
});

2. 统计`.active`单元格数量

分类完成后，直接通过jQuery选择器获取目标元素并读取长度：

const activeCellCount = $('td.active').length;

3. 用模态框展示统计结果（基于jQuery UI Dialog）

你提到的autoOpen: true是jQuery UI Dialog的标准配置项，按以下步骤实现：

先在HTML中添加模态框容器

<div id="activeCountModal" title="Active单元格统计">
  <p>符合条件的单元格数量：<span id="countDisplay"></span></p>
</div>

整合逻辑到DOM就绪事件

确保页面元素加载完成后再执行所有操作：

$(document).ready(function() {
  // 为单元格添加对应class
  $('td').each(function() {
    const cellText = $(this).text().trim();
    if (/^[0-9][A-Z]/.test(cellText)) {
      $(this).addClass('active');
    } else if (/^c[0-9]/.test(cellText)) {
      $(this).addClass('none');
    }
  });

  // 统计active单元格数量
  const activeCellCount = $('td.active').length;

  // 初始化并自动打开模态框
  $('#activeCountModal').dialog({
    autoOpen: true,
    modal: true,
    width: 320
  });

  // 插入统计数值到模态框
  $('#countDisplay').text(activeCellCount);
});

注意事项

确保页面已引入jQuery和jQuery UI的依赖资源：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>