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

代替案: バニラ 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 の関数またはカスタム モーダルは、テーブル コンテンツの処理に関して多大な汎用性を提供する 2 つの方法です。