Cara Menggunakan Kelas Tertentu di JavaScript untuk Menghitung Sel Tabel

Memicu Modal dengan Jumlah Kelas Aktif dalam Tabel

Anda mungkin ingin menerapkan perilaku khusus berdasarkan konten setiap sel saat bekerja dengannya tabel HTML. Misalnya, Anda bisa menggunakan pola atau kriteria tertentu untuk menetapkan kelas secara dinamis ke sel tabel. Hasilnya, meja Anda mungkin menjadi lebih berguna dan menarik.

Dalam contoh ini, sel tabel yang memenuhi persyaratan tertentu akan diberi nama kelas aktif ditambahkan ke mereka. A JavaScript fungsi yang memeriksa setiap sel, memverifikasi isinya, dan kemudian menerapkan kelas dengan tepat digunakan untuk melakukan ini. Ini adalah metode produktif dalam mengatur sel tertentu berdasarkan datanya.

Setelah menerapkan aktif kelas ke subset sel, menghitung jumlah sel yang memiliki kelas ini bisa menjadi langkah berikutnya yang sering dilakukan. Jika Anda ingin memulai suatu peristiwa atau tindakan, seperti membuka modal yang menunjukkan hitungan, menghitung sel-sel ini bisa sangat membantu.

Tutorial ini akan mengajarkan Anda cara menggunakan JavaScript untuk menghitung jumlah sel yang memiliki aktif kelas dan secara otomatis meluncurkan modal yang menunjukkan hitungan. Menggunakan jQuery, solusinya mudah, efisien, dan mudah diterapkan.

Memahami Skrip: Menghitung Sel dan Memicu Modal

Dalam contoh skrip pertama, setiap sel tabel diiterasi, kontennya dievaluasi, dan kelas ditetapkan bergantung pada evaluasi yang menggunakan jQuery. Fitur ini dimungkinkan dengan melakukan iterasi melalui masing-masing item dalam tabel menggunakan .setiap() metode. Ekspresi reguler digunakan untuk menerapkan dua pemeriksaan kondisional di dalam loop ini. Pola-pola ini memastikan apakah konten setiap sel mengikuti format tertentu. Sel memperoleh aktif kelas jika isinya mengikuti suatu pola, misalnya angka dan huruf kapital. Agar sel dapat dikategorikan secara dinamis, hal ini penting.

Dengan RegExp() konstruktor, ekspresi reguler untuk mencocokkan angka yang diikuti dengan huruf dibuat. Teknik ini memastikan bahwa sel dengan data, seperti "1A" atau "3C", dikenali dan diberi label dengan kelas saat ini. Sel menerima kelas terpisah yang disebut tidak ada jika kontennya cocok dengan pola yang berbeda, "c" tersebut diikuti dengan angka. Hal ini memungkinkan untuk mengklasifikasikan data dalam tabel dengan lebih tepat. Selain itu, tambahkanKelas() Metode menjamin bahwa sel dapat menambahkan kelas-kelas ini tanpa menghapus kelas apa pun yang mungkin sudah dimilikinya.

Langkah selanjutnya adalah menghitung sel yang sesuai dan memulai modal setelah semuanya ditandai dengan kelas aktif. Setiap kali sel memperoleh kelas aktif, hitungannya bertambah dan disimpan dalam nama variabel hitungan aktif. Jumlah sel yang memenuhi syarat dalam tabel harus dipastikan menggunakan hitungan ini. Menggunakan .dialog() fungsi dari jQuery UI, modal dihasilkan ketika penghitungan selesai. Itu Buka otomatis: benar atribut memungkinkan modal untuk terbuka secara otomatis. Jumlah sel aktif ditampilkan di dalam modal.

Dalam kasus kedua, vanilla JavaScript digunakan untuk menduplikasi prosedur yang sama. kueriSelectorAll() digunakan sebagai pengganti jQuery dalam pendekatan ini untuk memilih semua sel tabel, dan cara yang mudah untukSetiap() loop berulang melalui setiap sel. Ekspresi reguler digunakan untuk mencocokkan konten sel, seperti dalam solusi jQuery. Jika kecocokan ditemukan, activeCount diperbarui dan kelas aktif ditambahkan menggunakan Daftar kelas.tambahkan() metode. Pada akhirnya, mengubah HTML internal dari elemen modal yang telah ditentukan sebelumnya di DOM akan mengaktifkan modal tersebut. Hasil yang sama seperti contoh jQuery dicapai dengan menggunakan solusi 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 Pemilihan Sel dan Penanganan Kelas di JavaScript

Bekerja dengan JavaScript Dan tabel HTML juga melibatkan kemampuan untuk memodifikasi kelas secara dinamis sebagai respons terhadap masukan atau konten pengguna. Anda dapat melakukan lebih dari sekedar menghitung sel; Anda juga dapat menangani input pengguna dan langsung mengubah konten tabel. Misalnya menggunakan metode seperti removeClass() di jQuery atau classList.remove() di vanilla JavaScript, Anda dapat mengubah kelas secara dinamis, menyorot, atau bahkan menghapus kelas ketika pengguna mengklik sel tabel. Hasilnya, tabel menjadi jauh lebih interaktif, dan penyesuaian lebih lanjut berdasarkan pembaruan konten secara real-time dapat dilakukan.

Tabel yang menampilkan data waktu nyata di mana sel tertentu perlu dipisahkan secara visual bergantung pada perubahan kelas akan menjadi kasus penggunaan yang berguna untuk ini. Sangat mudah untuk mengikat fungsi yang menyebabkan modifikasi ini dengan menggunakan pendengar acara. Dalam JavaScript, misalnya, Anda dapat menggunakan addEventListener() untuk mendengarkan kejadian pada sel tertentu, seperti klik atau penekanan tombol. Modifikasi kelas tambahan atau bahkan pembaruan pada penghitung yang mencerminkan jumlah aktif sel dalam tabel mungkin dihasilkan dari interaksi ini.

Anda juga dapat memikirkan situasi di mana sel harus diperbarui secara otomatis tanpa masukan apa pun dari pengguna. Isi tabel dapat diperbarui dan dipantau secara terus menerus melalui panggilan interval atau AJAX. Ekspresi reguler dan metode seperti setInterval() izinkan tabel untuk secara otomatis mengubah kelasnya dan meluncurkan modal ketika ambang batas tercapai. Tabel kini dapat digunakan dalam aplikasi yang lebih dinamis, seperti dasbor dan pengaturan berbasis data.