Kaip naudoti konkrečią „JavaScript“ klasę lentelės langeliams skaičiuoti

Modalo suaktyvinimas su aktyvių klasių skaičiumi lentelėje

Dirbdami su kiekvieno langelio turiniu galite pritaikyti tinkintą elgseną HTML lentelės. Pavyzdžiui, galite naudoti konkrečius šablonus arba kriterijus, kad dinamiškai priskirtumėte klases lentelės langeliams. Dėl to jūsų lentelė gali tapti naudingesnė ir patrauklesnė.

Šiame pavyzdyje lentelės langeliai, atitinkantys tam tikrus reikalavimus, turės klasę, pavadintą aktyvus pridėta prie jų. A JavaScript Tam naudojama funkcija, kuri ištiria kiekvieną langelį, patikrina jos turinį ir tada tinkamai pritaiko klasę. Tai produktyvus būdas organizuoti tam tikras ląsteles pagal jų duomenis.

Pritaikius aktyvus klasę į langelių poaibį, dažnas kitas žingsnis gali būti ląstelių, turinčių šią klasę, skaičiaus skaičiavimas. Jei norite pradėti įvykį ar veiksmą, toks modalo, rodančio skaičių, atidarymas, šių langelių suskaičiavimas gali būti labai naudingas.

Ši pamoka išmokys jus naudoti „JavaScript“, kad būtų galima suskaičiuoti langelių, turinčių „ aktyvus klasę ir automatiškai paleisti modalą, rodantį skaičių. Naudojant jQuery, sprendimas yra paprastas, efektyvus ir lengvai įgyvendinamas.

Scenarijaus supratimas: ląstelių skaičiavimas ir modalo suaktyvinimas

Pirmajame scenarijaus pavyzdyje kiekvienas lentelės langelis kartojamas, jo turinys įvertinamas ir klasė priskiriama priklausomai nuo įvertinimo naudojant jQuery. Ši funkcija pasiekiama kartojant kiekvieną iš lentelės elementai naudojant .each() metodas. Reguliarūs posakiai yra naudojami taikant du sąlyginius patikrinimus šioje kilpoje. Šie modeliai nustato, ar kiekvieno langelio turinys atitinka tam tikrą formatą. Ląstelė įgyja aktyvus klasė, jei turinys atitinka šabloną, pvz., skaičių ir didžiąją raidę. Tai būtina, kad ląstelės būtų dinamiškai suskirstytos į kategorijas.

Su RegExp() konstruktorius, sukuriama reguliarioji išraiška, skirta suderinti skaičius, po kurių pateikiamos raidės. Ši technika užtikrina, kad ląstelės su duomenimis, pvz., „1A“ arba „3C“, būtų atpažįstamos ir pažymėtos esama klase. Ląstelė gauna atskirą klasę, vadinamą jokios jei turinys sutampa su kitokiu šablonu, toks „c“, po kurio rašomas skaičius. Tai leidžia tiksliau klasifikuoti duomenis lentelėje. Be to, addClass() metodas garantuoja, kad ląstelės gali pridėti šias klases neištrinant jau turimų klasių.

Kitas žingsnis yra suskaičiuoti atitinkamas ląsteles ir pradėti modalą, kai visos jos bus pažymėtos aktyvia klase. Kiekvieną kartą, kai langelis gauna aktyvią klasę, skaičius didėja ir išsaugomas kintamajame pavadintame aktyvus skaičius. Tinkamų langelių skaičius lentelėje turi būti nustatytas naudojant šį skaičių. Naudojant .dialog() funkcija iš jQuery UI, modalas sugeneruojamas, kai skaičiavimas baigtas. The automatinis atidarymas: tiesa atributas leidžia modalui atsidaryti automatiškai. Aktyvių ląstelių skaičius rodomas modalo viduje.

Antruoju atveju identiškai procedūrai dubliuoti naudojamas vanilinis JavaScript. querySelectorAll() Šis metodas naudojamas vietoje jQuery, kad būtų galima pasirinkti visus lentelės langelius, ir tai yra paprasta už kiekvieną () ciklas kartojasi per kiekvieną langelį. Reguliarios išraiškos naudojamos langelio turiniui suderinti, kaip ir jQuery sprendime. Jei aptinkama atitiktis, aktyvus skaičius atnaujinamas ir aktyvi klasė pridedama naudojant classList.add() metodas. Galiausiai, pakeitus DOM iš anksto nustatyto modalinio elemento vidinį HTML, modalas suaktyvinamas. Naudojant šį sprendimą, kuris nepriklauso nuo išorinių bibliotekų, pasiekiamas toks pat rezultatas, kaip ir jQuery pavyzdyje.

$(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“ langelių pasirinkimo ir klasių tvarkymo išplėtimas

Darbas su JavaScript ir HTML lentelės taip pat apima galimybę dinamiškai modifikuoti klases, reaguojant į vartotojo įvestį ar turinį. Galite ne tik suskaičiuoti ląsteles; taip pat galite tvarkyti vartotojo įvestis ir akimirksniu pakeisti lentelės turinį. Pavyzdžiui, naudojant tokius metodus kaip removeClass() jQuery arba classList.remove() „vanilla JavaScript“ galite dinamiškai modifikuoti klasę, paryškinti ar net pašalinti klasę, kai vartotojas spustelėja lentelės langelį. Dėl to lentelės tampa daug interaktyvesnės, todėl galimas tolesnis tinkinimas, pagrįstas turinio atnaujinimais realiuoju laiku.

Lentelė, kurioje rodomi realaus laiko duomenys, kai tam tikros ląstelės turi būti vizualiai atskirtos, atsižvelgiant į klasės pakeitimą, būtų naudingas atvejis. Naudojant įvykių klausytojus paprasta susieti funkcijas, kurios sukelia šiuos pakeitimus. Pavyzdžiui, „JavaScript“ galite naudoti addEventListener() klausytis įvykių tam tikrose ląstelėse, pvz., paspaudimų ar klavišų paspaudimų. Papildomos klasės modifikacijos ar net skaitiklio atnaujinimai, atspindintys skaičių aktyvus lentelės langeliai gali atsirasti dėl šios sąveikos.

Taip pat galite pagalvoti apie situacijas, kai langeliai turėtų būti atnaujinami automatiškai be vartotojo įvesties. Lentelės turinį galima atnaujinti ir nuolat stebėti intervalais arba AJAX skambučiais. Reguliarūs posakiai ir metodai, pvz setInterval() leisti lentelei automatiškai keisti klases ir paleisti modalą, kai pasiekiamas slenkstis. Dabar lenteles galima naudoti dinamiškesnėse programose, pvz., prietaisų skydeliuose ir duomenimis pagrįstuose nustatymuose.