JavaScript で特定のクラスを使用して表のセルを数える方法

テーブル内のアクティブなクラス数を使用してモーダルをトリガーする

作業するときに、各セルの内容に基づいてカスタム動作を適用したい場合があります。 。たとえば、特定のパターンや基準を使用して、テーブルのセルにクラスを動的に割り当てることができます。その結果、テーブルがさらに便利で魅力的なものになるかもしれません。

この例では、特定の要件を満たすテーブル セルには、という名前のクラスが含まれます。 それらに追加されました。あ これを行うには、各セルを調べてその内容を検証し、クラスを適切に適用する関数が使用されます。これは、データに従って特定のセルを編成する生産的な方法です。

適用後、 クラスをセルのサブセットに追加し、このクラスを持つセルの数を数えることが次のステップとして頻繁に行われる可能性があります。カウントを表示するモーダルを開くなど、イベントまたはアクションを開始したい場合、これらのセルをカウントすると非常に役立ちます。

このチュートリアルでは、JavaScript を使用して、 クラスを作成し、カウントを表示するモーダルを自動的に起動します。使用する 、ソリューションは単純かつ効率的で、実装が簡単です。

指示	使用例
.each()	一致した要素のセット内のすべての要素が、この jQuery 関数によって反復処理されます。テーブルの各セルを反復処理することで、条件付きロジックまたはクラスを適用します (	) in our example.
addClass()	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()	指定された CSS セレクターに一致するドキュメント内のすべての要素が、この JavaScript 関数によって返されます。基本的な 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 から関数を使用すると、カウントが終了するとモーダルが生成されます。の 属性を使用すると、モーダルが自動的に開くようになります。アクティブなセルの数がモーダル内に表示されます。

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