Tablo Hücrelerini Saymak İçin JavaScript'te Belirli Bir Sınıfı Kullanma

Bir Tabloda Etkin Sınıf Sayımı ile Modal Tetikleme

İle çalışırken her hücrenin içeriğine göre özel davranış uygulamak isteyebilirsiniz. HTML tabloları. Örneğin, sınıfları tablo hücrelerine dinamik olarak atamak için belirli kalıpları veya kriterleri kullanabilirsiniz. Sonuç olarak masanız daha kullanışlı ve ilgi çekici hale gelebilir.

Bu örnekte, belirli gereksinimleri karşılayan tablo hücreleri, adında bir sınıfa sahip olacaktır. aktif onlara eklendi. A JavaScript Bunu yapmak için her hücreyi inceleyen, içeriğini doğrulayan ve ardından sınıfı uygun şekilde uygulayan işlev kullanılır. Belirli hücreleri verilerine göre organize etmenin verimli bir yöntemidir.

Uyguladıktan sonra aktif Sınıfı bir hücre alt kümesine ayırmak, bu sınıfa sahip hücrelerin sayısını saymak sık sık atılacak bir sonraki adım olabilir. Eğer bir olay ya da eylem başlatmak istiyorsanız sayımı gösteren bir mod açmak, bu hücreleri saymak oldukça işinize yarayabilir.

Bu eğitim size, aşağıdaki özelliklere sahip hücrelerin sayısını saymak için JavaScript'i nasıl kullanacağınızı öğretecektir: aktif sınıf ve sayımı gösteren bir modeli otomatik olarak başlatmak için. Kullanma jQueryÇözüm basit, etkili ve uygulaması basittir.

Komut Dosyasını Anlamak: Hücreleri Saymak ve Bir Modalı Tetiklemek

İlk komut dosyası örneğinde, her tablo hücresi yinelenir, içeriği değerlendirilir ve değerlendirmeye bağlı olarak bir sınıf atanır. jQuery. Bu özellik, her bir adımın yinelenmesiyle mümkün hale gelir. kullanarak tablodaki öğeleri .her biri() Yöntem. Bu döngüde iki koşullu kontrolü uygulamak için düzenli ifadeler kullanılır. Bu modeller, her hücrenin içeriğinin belirli bir formata uyup uymadığını tespit eder. Hücre kazanır aktif içerik sayı ve büyük harf gibi bir düzeni takip ediyorsa sınıf. Hücrelerin dinamik olarak kategorize edilmesi için bu önemlidir.

ile RegExp() yapıcıda, harflerin takip ettiği sayıları eşleştirmek için düzenli bir ifade oluşturulur. Bu teknik, "1A" veya "3C" gibi veri içeren hücrelerin geçerli sınıfla tanınmasını ve etiketlenmesini sağlar. Hücre, adı verilen ayrı bir sınıf alır. hiçbiri içerik farklı bir kalıpla eşleşiyorsa "c" ve ardından bir sayı gelir. Bu, tablodaki verilerin daha kesin bir şekilde sınıflandırılmasını mümkün kılar. Ayrıca, addClass() yöntem, hücrelerin halihazırda sahip oldukları sınıfları silmeden bu sınıfları ekleyebileceğini garanti eder.

Bir sonraki adım, uygun hücreleri saymak ve hepsi aktif sınıfla etiketlendikten sonra bir model başlatmaktır. Bir hücre aktif sınıfı her aldığında, sayı artırılır ve adlı bir değişkene kaydedilir. aktifSayı. Tablodaki uygun hücrelerin sayısı bu sayım kullanılarak belirlenmelidir. kullanarak .dialog() jQuery UI'dan bir işlev kullanıldığında, sayma bittiğinde bir modal oluşturulur. otomatikAçık: doğru özellik, modalın otomatik olarak açılmasına izin verir. Aktif hücrelerin sayısı modal içinde gösterilir.

İkinci durumda, aynı prosedürü kopyalamak için vanilya JavaScript kullanılır. querySelectorAll() Bu yaklaşımda tüm tablo hücrelerini seçmek için jQuery yerine kullanılır ve basit bir Herbiri için() döngü her hücrede yinelenir. Tıpkı jQuery çözümünde olduğu gibi hücre içeriğini eşleştirmek için normal ifadeler kullanılır. Bir eşleşme bulunursa activeCount güncellenir ve active sınıfı kullanılarak eklenir. classList.add() Yöntem. Sonuçta, DOM'daki önceden tanımlanmış bir modal öğenin dahili HTML'sini değiştirmek, modeli etkinleştirir. Dış kütüphanelere dayanmayan bu çözüm kullanılarak jQuery örneğiyle aynı sonuca ulaşıldı.

$(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'te Hücre Seçimi ve Sınıf İşlemeyi Genişletmek

Birlikte çalışmak JavaScript Ve HTML tabloları aynı zamanda kullanıcı girdisine veya içeriğine yanıt olarak sınıfları dinamik olarak değiştirme yeteneğini de içerir. Hücreleri saymaktan daha fazlasını yapabilirsiniz; ayrıca kullanıcı girişlerini yönetebilir ve tablonun içeriğini anında değiştirebilirsiniz. Örneğin, gibi yöntemleri kullanarak removeClass() jQuery'de veya classList.remove() Vanilya JavaScript'te, kullanıcı bir tablo hücresini tıkladığında sınıfı dinamik olarak değiştirebilir, vurgulayabilir ve hatta sınıfı kaldırabilirsiniz. Sonuç olarak tablolar çok daha etkileşimli hale geliyor ve gerçek zamanlı içerik güncellemelerine dayalı olarak daha fazla özelleştirme mümkün oluyor.

Belirli hücrelerin sınıf değişikliğine bağlı olarak görsel olarak ayrılması gereken gerçek zamanlı verileri gösteren bir tablo bunun için yararlı bir kullanım örneği olacaktır. Olay dinleyicilerini kullanarak bu değişikliklere neden olan işlevleri bağlamak kolaydır. Örneğin JavaScript'te şunları kullanabilirsiniz: addEventListener() tıklamalar veya tuşlara basma gibi belirli hücrelerdeki olayları dinlemek için. sayısını yansıtan bir sayaçta ek sınıf değişiklikleri ve hatta güncellemeler aktif Tablodaki hücreler bu etkileşimden kaynaklanabilir.

Ayrıca, kullanıcıların herhangi bir girişi olmadan hücrelerin otomatik olarak güncellenmesi gereken durumları da düşünebilirsiniz. Tablo içeriği aralıklı veya AJAX çağrıları yoluyla sürekli olarak güncellenebilir ve izlenebilir. Düzenli ifadeler ve yöntemler gibi setInterval() tablonun otomatik olarak sınıflarını değiştirmesine ve bir eşiğe ulaşıldığında bir model başlatmasına izin verin. Tablolar artık kontrol panelleri ve veriye dayalı ayarlar gibi daha dinamik uygulamalarda kullanılabilir.