主页 / coding / 问题 / 79033531
Accepted
Alex
Asked: 2024-09-28 13:48:21 +0800 CST

使用 JavaScript 计算特定类别的单元格数量

  • 772

我有一个 HTML 表和以下脚本，class根据单元格的内容向单元格添加特定内容。

现在，我想仅计算带有 的项目，并触发带有这些项目数量的class = active模态框 ( )。有什么建议吗？autoOpen: true

<script>
$('td').each(function() {
var $this = $(this)
  if ($this.text().match(new RegExp(/^[0-9][A-Z]/)) !== null ) {
    $this.addClass('active');
  }
  if ($this.text().match(new RegExp(/^c[0-9]/)) !== null ) {
    $this.addClass('none');
  }
});
</script>
javascript

1 个回答

  1. Best Answer

    这是一个更有效的代码，它返回切换的活动单元格的数量

    1. 缓存正则表达式，使其仅创建一次
    2. 缓存文本，以便只读取一次
    3. 使用 toggleClass 来设置类，而不是 addClass，这样我们就可以使用匹配的结果
    4. 使用过滤器，这样我们就不必运行两次
    5. 使用 jQuery UI 显示模式

    const re1 = /^[0-9][A-Z]/; 
const re2 = /^c[0-9]/; // 

// Create the dialog once and keep it hidden initially
const $dialog = $('<div></div>').dialog({
  autoOpen: false, // Do not open immediately
  title: 'Active Element Count',
  modal: true,
  buttons: {
    Ok: function() {
      $(this).dialog('close');
    }
  }
});

$("#show").on('click', () => {
  const actives = $('td').filter(function() {
    const text = $(this).text();
    const makeActive = text.match(re1) !== null;
    $(this).toggleClass('active', makeActive);
    $(this).toggleClass('null', text.match(re2) !== null);
    return makeActive;
  }).length;

  // Update the dialog content and open it
  $dialog.html(`Active elements: ${actives}`);
  $dialog.dialog('open');
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css" />
<table>
  <tbody>
    <tr>
      <td>1A</td>
      <td>c1</td>
      <td>1B</td>
      <td>Something else</td>
      <td>c2</td>
      <td>Here it is not at the start 1A</td>
      <td>c3</td>
    </tr>
  </tbody>
</table>
<button type="button" id="show">Click for # active</button>

    • 1

相关问题