Cách sử dụng một lớp cụ thể trong JavaScript để đếm các ô trong bảng

Kích hoạt một phương thức với số lượng lớp hoạt động trong bảng

Bạn có thể muốn áp dụng hành vi tùy chỉnh dựa trên nội dung của từng ô khi làm việc với bảng HTML. Ví dụ: bạn có thể sử dụng các mẫu hoặc tiêu chí cụ thể để gán động các lớp cho các ô trong bảng. Kết quả là bảng của bạn có thể trở nên hữu ích và hấp dẫn hơn.

Trong ví dụ này, các ô trong bảng thỏa mãn các yêu cầu nhất định sẽ có một lớp có tên tích cực thêm vào chúng. MỘT JavaScript Hàm kiểm tra từng ô, xác minh nội dung của nó và sau đó áp dụng lớp một cách thích hợp được sử dụng để thực hiện việc này. Đó là một phương pháp hiệu quả để tổ chức các ô cụ thể theo dữ liệu của chúng.

Sau khi áp dụng tích cực lớp thành một tập hợp con các ô, việc đếm số ô có lớp này có thể là bước tiếp theo thường xuyên. Nếu bạn muốn bắt đầu một sự kiện hoặc hành động, việc mở một phương thức hiển thị số lượng, việc đếm các ô này có thể khá hữu ích.

Hướng dẫn này sẽ hướng dẫn bạn cách sử dụng JavaScript để đếm số ô có tích cực class và tự động khởi chạy một phương thức hiển thị số lượng. sử dụng jQuery, giải pháp đơn giản, hiệu quả và dễ thực hiện.

Hiểu tập lệnh: Đếm ô và kích hoạt một phương thức

Trong ví dụ tập lệnh đầu tiên, mỗi ô của bảng được lặp lại, nội dung của nó được đánh giá và một lớp được chỉ định tùy thuộc vào đánh giá bằng cách sử dụng jQuery. Tính năng này được thực hiện bằng cách lặp qua từng các mục trong bảng bằng cách sử dụng .mỗi() phương pháp. Biểu thức chính quy được sử dụng để áp dụng hai kiểm tra có điều kiện bên trong vòng lặp này. Các mẫu này xác định xem nội dung của mỗi ô có tuân thủ một định dạng cụ thể hay không. Tế bào thu được tích cực class nếu nội dung tuân theo một mẫu, chẳng hạn như số và chữ in hoa. Để các ô được phân loại động, điều này là cần thiết.

Với RegExp() hàm tạo, một biểu thức chính quy để khớp các số theo sau là các chữ cái được xây dựng. Kỹ thuật này đảm bảo rằng các ô có dữ liệu, chẳng hạn như "1A" hoặc "3C", được nhận dạng và gắn nhãn với lớp hiện tại. Ô nhận được một lớp riêng gọi là không có nếu nội dung khớp với một mẫu khác, chẳng hạn như "c" theo sau là một số. Điều này giúp phân loại dữ liệu trong bảng chính xác hơn. Hơn nữa, thêmClass() phương thức đảm bảo rằng các ô có thể thêm các lớp này mà không xóa bất kỳ lớp nào mà chúng có thể đã có.

Bước tiếp theo là đếm các ô thích hợp và bắt đầu một phương thức sau khi tất cả chúng đã được gắn thẻ với lớp đang hoạt động. Mỗi khi một ô nhận được lớp hoạt động, số đếm sẽ tăng lên và được lưu vào một biến có tên số lượng hoạt động. Số lượng ô đủ điều kiện trong bảng phải được xác định chắc chắn bằng cách sử dụng số lượng này. Sử dụng .hộp thoại() từ giao diện người dùng jQuery, một phương thức được tạo khi quá trình đếm kết thúc. các tự động mở: đúng thuộc tính cho phép phương thức mở tự động. Số lượng ô hiện hoạt được hiển thị bên trong phương thức.

Trong trường hợp thứ hai, JavaScript vanilla được sử dụng để sao chép quy trình tương tự. truy vấnSelectorAll() được sử dụng thay cho jQuery trong phương pháp này để chọn tất cả các ô trong bảng và một cách đơn giản forEach() vòng lặp lặp qua từng ô. Biểu thức chính quy được sử dụng để khớp với nội dung ô, giống như trong giải pháp jQuery. Nếu phát hiện thấy sự trùng khớp, activeCount sẽ được cập nhật và lớp hoạt động sẽ được thêm bằng cách sử dụng classList.add() phương pháp. Cuối cùng, việc thay đổi HTML bên trong của thành phần phương thức được xác định trước trong DOM sẽ kích hoạt phương thức đó. Kết quả tương tự như ví dụ jQuery đạt được khi sử dụng giải pháp này, giải pháp này không phụ thuộc vào các thư viện bên ngoài.

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

Mở rộng về lựa chọn ô và xử lý lớp trong JavaScript

Làm việc với JavaScript Và bảng HTML cũng liên quan đến khả năng sửa đổi động các lớp để đáp ứng với nội dung hoặc đầu vào của người dùng. Bạn có thể làm nhiều việc hơn là chỉ đếm các ô; bạn cũng có thể xử lý thông tin đầu vào của người dùng và thay đổi ngay nội dung của bảng. Ví dụ: sử dụng các phương pháp như removeClass() trong jQuery hoặc classList.remove() trong JavaScript vanilla, bạn có thể tự động sửa đổi lớp, đánh dấu hoặc thậm chí xóa lớp khi người dùng nhấp vào một ô trong bảng. Do đó, các bảng trở nên tương tác hơn đáng kể và có thể tùy chỉnh thêm dựa trên các cập nhật nội dung trong thời gian thực.

Một bảng hiển thị dữ liệu thời gian thực trong đó các ô cụ thể cần được phân tách trực quan tùy thuộc vào sự thay đổi của lớp sẽ là trường hợp sử dụng hữu ích cho việc này. Thật đơn giản để liên kết các hàm gây ra những sửa đổi này bằng cách sử dụng trình xử lý sự kiện. Ví dụ: trong JavaScript, bạn có thể sử dụng addEventListener() để lắng nghe các sự kiện trên các ô cụ thể, chẳng hạn như nhấp chuột hoặc nhấn phím. Các sửa đổi bổ sung về lớp hoặc thậm chí cập nhật một bộ đếm phản ánh số lượng tích cực các ô trong bảng có thể là kết quả của sự tương tác này.

Bạn cũng có thể nghĩ đến các tình huống trong đó các ô sẽ tự động cập nhật mà không cần bất kỳ thông tin nhập nào từ người dùng. Nội dung bảng có thể được cập nhật và theo dõi liên tục thông qua một khoảng thời gian hoặc các cuộc gọi AJAX. Các biểu thức và phương thức thông thường như setInterval() cho phép bảng tự động thay đổi các lớp của nó và khởi chạy một phương thức khi đạt đến ngưỡng. Giờ đây, bảng có thể được sử dụng trong các ứng dụng năng động hơn, như bảng thông tin và cài đặt dựa trên dữ liệu.