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()	주어진 CSS 선택기와 일치하는 문서의 모든 요소는 이 JavaScript 함수에 의해 반환됩니다. 기본 JavaScript 예제에서는 모든 항목을 선택하는 데 사용됩니다.	element in the table for further processing.
각()	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의 함수 또는 사용자 정의 모달은 테이블 내용을 처리할 때 매우 다양한 기능을 제공하는 두 가지 방법입니다.