Cara Menggunakan Kelas Khusus dalam JavaScript untuk Mengira Sel Jadual

Mencetuskan Modal dengan Kiraan Kelas Aktif dalam Jadual

Anda mungkin ingin menggunakan tingkah laku tersuai berdasarkan kandungan setiap sel semasa bekerja dengannya jadual HTML. Sebagai contoh, anda boleh menggunakan corak atau kriteria tertentu untuk menetapkan kelas secara dinamik kepada sel jadual. Meja anda mungkin menjadi lebih berguna dan menarik akibatnya.

Dalam contoh ini, sel jadual yang memenuhi keperluan tertentu akan mempunyai kelas yang dinamakan aktif ditambah kepada mereka. A JavaScript fungsi yang memeriksa setiap sel, mengesahkan kandungannya, dan kemudian menggunakan kelas dengan sewajarnya digunakan untuk melakukan ini. Ia adalah kaedah yang produktif untuk mengatur sel tertentu mengikut data mereka.

Selepas menggunakan aktif kelas kepada subset sel, mengira bilangan sel yang mempunyai kelas ini boleh menjadi langkah seterusnya yang kerap. Jika anda ingin memulakan acara atau tindakan, membuka modal sedemikian yang menunjukkan kiraan, mengira sel ini boleh membantu.

Tutorial ini akan mengajar anda cara menggunakan JavaScript untuk mengira bilangan sel yang mempunyai aktif kelas dan untuk melancarkan modal secara automatik yang menunjukkan kiraan. menggunakan jQuery, penyelesaiannya adalah mudah, cekap dan mudah untuk dilaksanakan.

Memahami Skrip: Mengira Sel dan Mencetuskan Modal

Dalam contoh skrip pertama, setiap sel jadual diulang, kandungannya dinilai dan kelas ditetapkan bergantung pada penilaian menggunakan jQuery. Ciri ini dimungkinkan dengan mengulangi setiap satu item dalam jadual menggunakan .each() kaedah. Ungkapan biasa digunakan untuk menggunakan dua semakan bersyarat di dalam gelung ini. Corak ini memastikan sama ada kandungan setiap sel mematuhi format tertentu. Sel mendapat aktif kelas jika kandungan mengikut corak, seperti nombor dan huruf besar. Untuk sel dikategorikan secara dinamik, ini penting.

Dengan RegExp() pembina, ungkapan biasa untuk nombor yang sepadan diikuti dengan huruf dibina. Teknik ini memastikan bahawa sel dengan data, seperti "1A" atau "3C," dikenali dan dilabelkan dengan kelas semasa. Sel menerima kelas berasingan yang dipanggil tiada jika kandungan sepadan dengan corak yang berbeza, seperti "c" diikuti dengan nombor. Ini memungkinkan untuk mengklasifikasikan data dalam jadual dengan lebih tepat. Tambahan pula, addClass() kaedah menjamin bahawa sel boleh menambah kelas ini tanpa memadamkan sebarang kelas yang mungkin sudah ada.

Langkah seterusnya ialah mengira sel yang sesuai dan memulakan modal selepas semuanya ditandakan dengan kelas aktif. Setiap kali sel memperoleh kelas aktif, kiraan akan ditambah dan disimpan dalam pembolehubah bernama activeCount. Bilangan sel yang layak dalam jadual mesti dipastikan menggunakan kiraan ini. Menggunakan .dialog() fungsi daripada jQuery UI, modal dijana apabila pengiraan selesai. The autoBuka: benar atribut membenarkan modal dibuka secara automatik. Bilangan sel aktif ditunjukkan di dalam modal.

Dalam kes kedua, JavaScript vanila digunakan untuk menduplikasi prosedur yang sama. querySelectorAll() digunakan sebagai ganti jQuery dalam pendekatan ini untuk memilih semua sel jadual, dan mudah forEach() gelung berulang melalui setiap sel. Ungkapan biasa digunakan untuk memadankan kandungan sel, sama seperti dalam penyelesaian jQuery. Jika padanan ditemui, activeCount dikemas kini dan kelas aktif ditambah menggunakan classList.add() kaedah. Akhirnya, mengubah HTML dalaman unsur modal yang dipratentukan dalam DOM mengaktifkan modal. Hasil yang sama seperti contoh jQuery dicapai menggunakan penyelesaian ini, yang tidak bergantung pada perpustakaan luar.

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

Memperluas pada Pemilihan Sel dan Pengendalian Kelas dalam JavaScript

Bekerja dengan JavaScript dan jadual HTML juga melibatkan keupayaan untuk mengubah suai kelas secara dinamik sebagai tindak balas kepada input atau kandungan pengguna. Anda boleh melakukan lebih daripada sekadar mengira sel; anda juga boleh mengendalikan input pengguna dan menukar kandungan jadual dengan serta-merta. Sebagai contoh, menggunakan kaedah seperti removeClass() dalam jQuery atau classList.remove() dalam JavaScript vanila, anda boleh mengubah suai kelas secara dinamik, menyerlahkan atau mengalih keluar kelas apabila pengguna mengklik pada sel jadual. Jadual menjadi jauh lebih interaktif akibatnya, dan penyesuaian selanjutnya berdasarkan kemas kini kandungan dalam masa nyata adalah mungkin.

Jadual yang memaparkan data masa nyata di mana sel tertentu perlu diasingkan secara visual bergantung pada perubahan kelas akan menjadi kes penggunaan yang berguna untuk ini. Mudah untuk mengikat fungsi yang menyebabkan pengubahsuaian ini dengan menggunakan pendengar acara. Dalam JavaScript, sebagai contoh, anda boleh menggunakan addEventListener() untuk mendengar acara pada sel tertentu, seperti klik atau tekanan kekunci. Pengubahsuaian kelas tambahan atau kemas kini ke kaunter yang mencerminkan bilangan aktif sel dalam jadual mungkin terhasil daripada interaksi ini.

Anda juga boleh memikirkan situasi di mana sel harus mengemas kini secara automatik tanpa sebarang input daripada pengguna. Kandungan jadual boleh dikemas kini dan dipantau secara berterusan melalui selang masa atau panggilan AJAX. Ungkapan dan kaedah biasa seperti setInterval() benarkan jadual menukar kelasnya secara automatik dan melancarkan modal apabila ambang dicapai. Jadual kini boleh digunakan dalam aplikasi yang lebih dinamik, seperti papan pemuka dan tetapan dipacu data.