அட்டவணை கலங்களை எண்ணுவதற்கு ஜாவாஸ்கிரிப்டில் ஒரு குறிப்பிட்ட வகுப்பை எவ்வாறு பயன்படுத்துவது

ஒரு அட்டவணையில் செயலில் உள்ள வகுப்பு எண்ணிக்கையுடன் ஒரு மாதிரியைத் தூண்டுகிறது

பணிபுரியும் போது ஒவ்வொரு கலத்தின் உள்ளடக்கங்களின் அடிப்படையில் தனிப்பயன் நடத்தையைப் பயன்படுத்த விரும்பலாம் . எடுத்துக்காட்டாக, அட்டவணை கலங்களுக்கு வகுப்புகளை மாறும் வகையில் ஒதுக்க குறிப்பிட்ட வடிவங்கள் அல்லது அளவுகோல்களைப் பயன்படுத்தலாம். இதன் விளைவாக உங்கள் அட்டவணை மிகவும் பயனுள்ளதாகவும் ஈர்க்கக்கூடியதாகவும் இருக்கலாம்.

இந்த எடுத்துக்காட்டில், சில தேவைகளைப் பூர்த்தி செய்யும் அட்டவணை செல்கள் ஒரு வகுப்பைக் கொண்டிருக்கும் அவர்களிடம் சேர்க்கப்பட்டது. ஏ ஒவ்வொரு கலத்தையும் ஆராய்ந்து, அதன் உள்ளடக்கங்களைச் சரிபார்த்து, பின்னர் வகுப்பை சரியான முறையில் பயன்படுத்துகின்ற செயல்பாடு இதைச் செய்யப் பயன்படுகிறது. இது குறிப்பிட்ட செல்களை அவற்றின் தரவுகளின்படி ஒழுங்கமைக்கும் ஒரு உற்பத்தி முறையாகும்.

விண்ணப்பித்த பிறகு கலங்களின் துணைக்குழுவிற்கு வகுப்பு, இந்த வகுப்பைக் கொண்ட கலங்களின் எண்ணிக்கையை எண்ணுவது அடிக்கடி அடுத்த படியாக இருக்கலாம். நீங்கள் ஒரு நிகழ்வு அல்லது செயலைத் தொடங்க விரும்பினால், எண்ணிக்கையைக் காட்டும் மாதிரியைத் திறந்து, இந்த செல்களை எண்ணுவது மிகவும் உதவியாக இருக்கும்.

இந்த டுடோரியல் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தும் கலங்களின் எண்ணிக்கையை எவ்வாறு கணக்கிடுவது என்பதை உங்களுக்குக் கற்பிக்கும் வகுப்பு மற்றும் எண்ணிக்கையைக் காட்டும் மாதிரியை தானாகத் தொடங்கவும். பயன்படுத்தி , தீர்வு நேரடியானது, திறமையானது மற்றும் செயல்படுத்த எளிதானது.

கட்டளை	பயன்பாட்டின் உதாரணம்
.each()	பொருந்திய உறுப்புகளின் தொகுப்பில் உள்ள ஒவ்வொரு உறுப்பும் இந்த jQuery செயல்பாட்டின் மூலம் மீண்டும் மீண்டும் செய்யப்படுகிறது. ஒவ்வொரு அட்டவணைக் கலத்தின் மீதும் மீண்டும் மீண்டும் செய்வதன் மூலம் இது நிபந்தனை தர்க்கம் அல்லது வகுப்புகளைப் பயன்படுத்துகிறது (	) in our example.
addClass()	The selected items receive one or more class names added to them by this jQuery method. The script applies the அல்லது அவற்றின் உள்ளடக்கத்திற்கு ஏற்ப கலங்களுக்கு வகுப்பு.
.dialog()	Used with jQuery UI to generate a modal dialog. When the script triggers the modal, the autoOpen: true option makes sure it opens automatically and shows the number of active items.
.text()	The text content of the chosen components is retrieved or set using this technique. In this instance, it checks to see if the contents of every	செல் ஒரு குறிப்பிட்ட வடிவத்துடன் பொருந்துகிறது.
RegExp()	இந்த JavaScript கன்ஸ்ட்ரக்டர் மூலம் வழக்கமான வெளிப்பாடுகள் செய்யப்படுகின்றன. போன்ற வடிவங்களைக் கண்டறிந்து உள்ளடக்கத்தின் அடிப்படையில் ஸ்கிரிப்ட் வகுப்புகளை ஒதுக்கலாம் அல்லது .
classList.add()	இந்த அடிப்படை ஜாவாஸ்கிரிப்ட் நுட்பம் ஒரு உறுப்புக்கு ஒரு குறிப்பிட்ட வகுப்பை வழங்குகிறது. இது வெண்ணிலா ஜாவாஸ்கிரிப்ட் கரைசலில் உள்ள jQuery இன் addClass() ஐப் போலவே செயல்படுகிறது. அல்லது நிபந்தனைகளைப் பொறுத்து வகுப்பு.
DOMContentLoaded	HTML ஆவணம் ஏற்றுதல் மற்றும் பாகுபடுத்துதல் முடிந்ததும், DOMContentLoaded நிகழ்வு தூண்டப்படும். வெண்ணிலா ஜாவாஸ்கிரிப்ட் எடுத்துக்காட்டில், DOM ஏற்றப்பட்ட பிறகு ஸ்கிரிப்ட் இயங்குவதை இது உறுதி செய்கிறது.
querySelectorAll()	கொடுக்கப்பட்ட CSS தேர்வாளருடன் பொருந்தக்கூடிய ஆவணத்தில் உள்ள ஒவ்வொரு உறுப்பும் இந்த JavaScript செயல்பாட்டின் மூலம் வழங்கப்படும். அடிப்படை ஜாவாஸ்கிரிப்ட் எடுத்துக்காட்டில், ஒவ்வொன்றையும் எடுக்க இது பயன்படுத்தப்படுகிறது	element in the table for further processing.
ஒவ்வொருவருக்கும்()	An array method in JavaScript that lets you iterate over elements. Here, it's utilized to iterate over every table cell that querySelectorAll() returned and apply the required logic to each one.

ஸ்கிரிப்டைப் புரிந்துகொள்வது: செல்களை எண்ணுதல் மற்றும் ஒரு மாதிரியைத் தூண்டுதல்

முதல் ஸ்கிரிப்ட் எடுத்துக்காட்டில், ஒவ்வொரு டேபிள் கலமும் மீண்டும் மீண்டும் செய்யப்படுகிறது, அதன் உள்ளடக்கம் மதிப்பிடப்படுகிறது, மேலும் பயன்படுத்தி மதிப்பீட்டைப் பொறுத்து ஒரு வகுப்பு ஒதுக்கப்படுகிறது. . இந்த அம்சம் ஒவ்வொன்றிலும் மீண்டும் மீண்டும் செய்வதன் மூலம் சாத்தியமாகும்

உடன் கன்ஸ்ட்ரக்டர், எண்களைத் தொடர்ந்து எழுத்துக்களைத் தொடர்ந்து பொருத்துவதற்கான வழக்கமான வெளிப்பாடு கட்டமைக்கப்படுகிறது. இந்த நுட்பம் "1A" அல்லது "3C" போன்ற தரவுகளைக் கொண்ட செல்கள் அங்கீகரிக்கப்பட்டு தற்போதைய வகுப்பில் லேபிளிடப்படுவதை உறுதி செய்கிறது. செல் எனப்படும் தனி வகுப்பைப் பெறுகிறது உள்ளடக்கம் வேறு மாதிரியுடன் பொருந்தினால், அத்தகைய "c" எண்ணைத் தொடர்ந்து. இது அட்டவணையில் உள்ள தரவை மிகவும் துல்லியமாக வகைப்படுத்துவதை சாத்தியமாக்குகிறது. மேலும், தி செல்கள் ஏற்கனவே வைத்திருக்கும் எந்த வகுப்புகளையும் நீக்காமல் இந்த வகுப்புகளைச் சேர்க்கலாம் என்று முறை உத்தரவாதம் அளிக்கிறது.

அடுத்த கட்டமாக, பொருத்தமான செல்களை எண்ணி, அவை அனைத்தும் செயலில் உள்ள வகுப்பில் குறியிடப்பட்ட பிறகு ஒரு மாதிரியைத் தொடங்க வேண்டும். ஒவ்வொரு முறையும் ஒரு செல் செயலில் உள்ள வகுப்பைப் பெறும்போது, ​​எண்ணிக்கை அதிகரிக்கப்பட்டு பெயரிடப்பட்ட மாறியில் சேமிக்கப்படும் . இந்த எண்ணிக்கையைப் பயன்படுத்தி அட்டவணையில் உள்ள தகுதிபெறும் கலங்களின் எண்ணிக்கையைக் கண்டறிய வேண்டும். பயன்படுத்தி jQuery UI இலிருந்து செயல்பாடு, எண்ணுதல் முடிந்ததும் ஒரு மாதிரி உருவாக்கப்படுகிறது. தி பண்புக்கூறு மாதிரியை தானாக திறக்க அனுமதிக்கிறது. செயலில் உள்ள கலங்களின் எண்ணிக்கை மாதிரியின் உள்ளே காட்டப்பட்டுள்ளது.

இரண்டாவது வழக்கில், வெண்ணிலா ஜாவாஸ்கிரிப்ட் ஒரே மாதிரியான செயல்முறையை நகலெடுக்க பயன்படுத்தப்படுகிறது. இந்த அணுகுமுறையில் jQuery க்கு பதிலாக அனைத்து டேபிள் செல்களையும் தேர்ந்தெடுக்கவும், மற்றும் ஒரு நேரடியானவை லூப் ஒவ்வொரு செல் வழியாகவும் மீண்டும் செல்கிறது. jQuery தீர்வைப் போலவே, செல் உள்ளடக்கத்துடன் பொருந்துவதற்கு வழக்கமான வெளிப்பாடுகள் பயன்படுத்தப்படுகின்றன. பொருத்தம் கண்டறியப்பட்டால், ஆக்டிவ்கவுண்ட் புதுப்பிக்கப்பட்டு, செயலில் உள்ள வகுப்பைப் பயன்படுத்தி சேர்க்கப்படும் முறை. இறுதியில், DOM இல் உள்ள முன் வரையறுக்கப்பட்ட மாதிரி உறுப்பின் உள் HTML ஐ மாற்றுவது மாதிரியை செயல்படுத்துகிறது. jQuery எடுத்துக்காட்டின் அதே விளைவு இந்த தீர்வைப் பயன்படுத்தி அடையப்படுகிறது, இது வெளிப்புற நூலகங்களைச் சார்ந்திருக்காது.

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

ஜாவாஸ்கிரிப்டில் செல் தேர்வு மற்றும் வகுப்பு கையாளுதல் ஆகியவற்றை விரிவுபடுத்துகிறது

உடன் பணிபுரிகிறது மற்றும் பயனர் உள்ளீடு அல்லது உள்ளடக்கத்திற்கு பதிலளிக்கும் வகையில் வகுப்புகளை மாறும் வகையில் மாற்றும் திறனையும் உள்ளடக்கியது. நீங்கள் செல்களை எண்ணுவதை விட அதிகமாக செய்யலாம்; நீங்கள் பயனர் உள்ளீடுகளைக் கையாளலாம் மற்றும் அட்டவணையின் உள்ளடக்கத்தை உடனடியாக மாற்றலாம். உதாரணமாக, போன்ற முறைகளைப் பயன்படுத்துதல் jQuery இல் அல்லது classList.remove() வெண்ணிலா ஜாவாஸ்கிரிப்டில், ஒரு பயனர் டேபிள் கலத்தில் கிளிக் செய்யும் போது, ​​வகுப்பை மாற்றியமைக்கலாம், தனிப்படுத்தலாம் அல்லது வகுப்பை அகற்றலாம். இதன் விளைவாக அட்டவணைகள் மிகவும் ஊடாடத்தக்கதாக மாறும், மேலும் உண்மையான நேரத்தில் உள்ளடக்கத்திற்கான புதுப்பிப்புகளின் அடிப்படையில் மேலும் தனிப்பயனாக்கம் சாத்தியமாகும்.

வகுப்பு மாற்றத்தைப் பொறுத்து குறிப்பிட்ட செல்கள் பார்வைக்கு பிரிக்கப்பட வேண்டிய நிகழ்நேரத் தரவைக் காண்பிக்கும் அட்டவணை இதற்குப் பயனுள்ளதாக இருக்கும். நிகழ்வு கேட்பவர்களைப் பயன்படுத்தி இந்த மாற்றங்களை ஏற்படுத்தும் செயல்பாடுகளை பிணைப்பது எளிது. ஜாவாஸ்கிரிப்டில், உதாரணமாக, நீங்கள் பயன்படுத்தலாம் கிளிக்குகள் அல்லது விசை அழுத்தங்கள் போன்ற குறிப்பிட்ட கலங்களில் நிகழ்வுகளைக் கேட்க. கூடுதல் வகுப்பு மாற்றங்கள் அல்லது கவுண்டரின் எண்ணிக்கையைப் பிரதிபலிக்கும் புதுப்பிப்புகள் அட்டவணையில் உள்ள செல்கள் இந்த இடைவினையின் விளைவாக இருக்கலாம்.

பயனரிடமிருந்து எந்த உள்ளீடும் இல்லாமல் செல்கள் தானாகவே புதுப்பிக்கப்பட வேண்டிய சூழ்நிலைகளைப் பற்றியும் நீங்கள் சிந்திக்கலாம். அட்டவணை உள்ளடக்கம் ஒரு இடைவெளி அல்லது AJAX அழைப்புகள் மூலம் தொடர்ந்து புதுப்பிக்கப்பட்டு கண்காணிக்கப்படும். போன்ற வழக்கமான வெளிப்பாடுகள் மற்றும் முறைகள் அட்டவணையை அதன் வகுப்புகளை தானாக மாற்ற அனுமதிக்கவும் மற்றும் ஒரு வரம்பை எட்டும்போது ஒரு மாதிரியை துவக்கவும். டேஷ்போர்டுகள் மற்றும் தரவு-உந்துதல் அமைப்புகள் போன்ற மிகவும் மாறும் பயன்பாடுகளில் இப்போது அட்டவணைகள் பயன்படுத்தப்படலாம்.

1. வெண்ணிலா ஜாவாஸ்கிரிப்ட்டில், ஒரு குறிப்பிட்ட வகுப்பைச் சேர்ந்த கூறுகளை எப்படி எண்ணுவது?
2. அந்த வகுப்பில் உள்ள ஒவ்வொரு உறுப்பையும் தேர்ந்தெடுக்க, பயன்படுத்தவும் ; அவற்றை எண்ண, பயன்படுத்த .
3. அட்டவணைக் கலத்தின் உள்ளடக்கத்தின் அடிப்படையில், அதில் வகுப்பை எவ்வாறு சேர்ப்பது?
4. நீங்கள் பயன்படுத்தி ஒரு வகுப்பை விண்ணப்பிக்கலாம் மற்றும் பயன்படுத்தி ஒரு கலத்தின் உள்ளடக்கங்களை ஆய்வு செய்யவும் அல்லது பண்புகள்.
5. எது வேறுபடுத்துகிறது வெண்ணிலா ஜாவாஸ்கிரிப்டில் இருந்து jQuery இல்?
6. ஒரு சொந்த ஜாவாஸ்கிரிப்ட் சொத்து, மற்றும் தேர்ந்தெடுக்கப்பட்ட உறுப்புகளின் உள்ளடக்கத்தை மீட்டெடுக்கும் அல்லது மாற்றியமைக்கும் ஒரு jQuery முறையாகும்.
7. ஒரு குறிப்பிட்ட வகுப்பைச் சேர்ந்த செல்களை எண்ணும்போது, ​​நான் எப்படி ஒரு மாதிரியைத் தொடங்குவது?
8. jQuery இல் ஒரு மாதிரியை உருவாக்க மற்றும் ஒரு குறிப்பிட்ட வகுப்பில் உள்ள உருப்படிகளின் எண்ணிக்கையைச் சார்ந்து தூண்டுவதற்கு, பயன்படுத்தவும் .
9. ஜாவாஸ்கிரிப்டில், ஒரு உறுப்பிலிருந்து ஒரு வகுப்பை நான் எப்படி எடுக்க முடியும்?
10. வெண்ணிலா ஜாவாஸ்கிரிப்ட்டில், நீங்கள் பயன்படுத்தலாம் ஒரு உறுப்பிலிருந்து ஒரு வகுப்பை அகற்ற.

ஜாவாஸ்கிரிப்ட் அல்லது jQuery ஒரு குறிப்பிட்ட வகுப்பைக் கொண்ட எண்ணும் கலங்களை நிர்வகிக்கப் பயன்படுகிறது , பயனுள்ள முறையில். வழக்கமான வெளிப்பாடுகள் அட்டவணை உள்ளடக்கத்தில் வடிவங்களை அடையாளம் காண ஒரு பயனுள்ள கருவியாகும், இது டைனமிக் வகுப்பு ஒதுக்கீடுகள் மற்றும் பிற தொடர்புகளை எளிதாக்குகிறது.

மேலும், இந்த செயலில் உள்ள கலங்களின் எண்ணிக்கையின் அடிப்படையில் ஒரு மாதிரியைத் தொடங்குவது ஒரு அட்டவணையின் நிலையைப் பயனர்களுக்குத் தெரிவிக்கும் ஒரு பயனுள்ள முறையாகும். தி jQuery இல் செயல்பாடு அல்லது தனிப்பயன் மாதிரி இரண்டு முறைகள், அவை அட்டவணை உள்ளடக்கத்தைக் கையாளும் போது பல்துறை திறன்களை வழங்குகின்றன.