ടേബിൾ സെല്ലുകൾ എണ്ണാൻ JavaScript-ൽ ഒരു പ്രത്യേക ക്ലാസ് എങ്ങനെ ഉപയോഗിക്കാം

ഒരു ടേബിളിൽ സജീവമായ ക്ലാസ് കൗണ്ട് ഉള്ള മോഡൽ ട്രിഗർ ചെയ്യുന്നു

പ്രവർത്തിക്കുമ്പോൾ ഓരോ സെല്ലിലെയും ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ഇഷ്‌ടാനുസൃത പെരുമാറ്റം പ്രയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം . ഉദാഹരണത്തിന്, ടേബിൾ സെല്ലുകളിലേക്ക് ക്ലാസുകൾ ഡൈനാമിക് ആയി നൽകുന്നതിന് നിങ്ങൾക്ക് നിർദ്ദിഷ്ട പാറ്റേണുകളോ മാനദണ്ഡങ്ങളോ ഉപയോഗിക്കാം. ഫലമായി നിങ്ങളുടെ ടേബിൾ കൂടുതൽ ഉപയോഗപ്രദവും ആകർഷകവുമാകാം.

ഈ ഉദാഹരണത്തിൽ, ചില ആവശ്യകതകൾ നിറവേറ്റുന്ന ടേബിൾ സെല്ലുകൾക്ക് പേരുള്ള ഒരു ക്ലാസ് ഉണ്ടായിരിക്കും അവരോട് ചേർത്തു. എ ഓരോ സെല്ലും പരിശോധിക്കുകയും അതിലെ ഉള്ളടക്കങ്ങൾ പരിശോധിക്കുകയും തുടർന്ന് ഉചിതമായ രീതിയിൽ ക്ലാസ് പ്രയോഗിക്കുകയും ചെയ്യുന്ന ഫംഗ്‌ഷൻ ഇത് ചെയ്യുന്നതിന് ഉപയോഗിക്കുന്നു. പ്രത്യേക സെല്ലുകളെ അവയുടെ ഡാറ്റയ്ക്ക് അനുസൃതമായി സംഘടിപ്പിക്കുന്നതിനുള്ള ഒരു ഉൽപാദന രീതിയാണിത്.

പ്രയോഗിച്ചതിന് ശേഷം സെല്ലുകളുടെ ഒരു ഉപവിഭാഗത്തിലേക്ക് ക്ലാസ്, ഈ ക്ലാസ് ഉള്ള സെല്ലുകളുടെ എണ്ണം കണക്കാക്കുന്നത് ഒരു പതിവ് അടുത്ത ഘട്ടമായിരിക്കും. നിങ്ങൾ ഒരു ഇവൻ്റോ പ്രവർത്തനമോ ആരംഭിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, എണ്ണം കാണിക്കുന്ന ഒരു മോഡൽ തുറക്കുന്നത്, ഈ സെല്ലുകൾ എണ്ണുന്നത് വളരെ സഹായകരമാണ്.

ഉള്ള സെല്ലുകളുടെ എണ്ണം കണക്കാക്കാൻ JavaScript എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഈ ട്യൂട്ടോറിയൽ നിങ്ങളെ പഠിപ്പിക്കും ക്ലാസ് കൂടാതെ എണ്ണം കാണിക്കുന്ന ഒരു മോഡൽ സ്വയമേവ സമാരംഭിക്കുന്നതിന്. ഉപയോഗിക്കുന്നത് , പരിഹാരം നേരായതും കാര്യക്ഷമവും നടപ്പിലാക്കാൻ ലളിതവുമാണ്.

കമാൻഡ്	ഉപയോഗത്തിൻ്റെ ഉദാഹരണം
.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. ഒരു നേറ്റീവ് JavaScript പ്രോപ്പർട്ടി ആണ്, കൂടാതെ തിരഞ്ഞെടുത്ത ഘടകങ്ങളുടെ ഉള്ളടക്കം വീണ്ടെടുക്കുകയോ പരിഷ്ക്കരിക്കുകയോ ചെയ്യുന്ന ഒരു jQuery രീതിയാണ്.
7. ഒരു പ്രത്യേക ക്ലാസിൽ പെടുന്ന സെല്ലുകൾ എണ്ണുമ്പോൾ, എനിക്ക് എങ്ങനെ ഒരു മോഡൽ ആരംഭിക്കാനാകും?
8. jQuery-യിൽ ഒരു മോഡൽ നിർമ്മിക്കുന്നതിനും ഒരു പ്രത്യേക ക്ലാസിലുള്ള ഇനങ്ങളുടെ എണ്ണത്തെ ആശ്രയിച്ച് അത് പ്രവർത്തനക്ഷമമാക്കുന്നതിനും, ഉപയോഗിക്കുക .
9. JavaScript-ൽ, ഒരു ഘടകത്തിൽ നിന്ന് എനിക്ക് എങ്ങനെ ഒരു ക്ലാസ് എടുക്കാം?
10. വാനില ജാവാസ്ക്രിപ്റ്റിൽ, നിങ്ങൾക്ക് ഉപയോഗിക്കാം ഒരു ഘടകത്തിൽ നിന്ന് ഒരു ക്ലാസ് നീക്കം ചെയ്യാൻ.

ജാവാസ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ jQuery ഒരു നിർദ്ദിഷ്ട ക്ലാസ് ഉപയോഗിച്ച് സെല്ലുകൾ കൗണ്ടിംഗ് നിയന്ത്രിക്കാൻ ഉപയോഗിക്കാം , ഫലപ്രദമായ രീതിയിൽ. ടേബിൾ ഉള്ളടക്കത്തിലെ പാറ്റേണുകൾ തിരിച്ചറിയുന്നതിനുള്ള ഒരു ഉപയോഗപ്രദമായ ഉപകരണമാണ് റെഗുലർ എക്സ്പ്രഷനുകൾ, ഇത് ഡൈനാമിക് ക്ലാസ് അസൈൻമെൻ്റുകളും മറ്റ് ഇടപെടലുകളും സുഗമമാക്കുന്നു.

കൂടാതെ, ഈ സജീവ സെല്ലുകളുടെ എണ്ണത്തെ അടിസ്ഥാനമാക്കി ഒരു മോഡൽ ആരംഭിക്കുക എന്നതാണ് ഒരു പട്ടികയുടെ നില ഉപയോക്താക്കളെ അറിയിക്കുന്നതിനുള്ള ഒരു ഉപയോഗപ്രദമായ രീതി. ദി jQuery-ലെ ഫംഗ്‌ഷൻ അല്ലെങ്കിൽ ഒരു ഇഷ്‌ടാനുസൃത മോഡൽ എന്നത് ടേബിൾ ഉള്ളടക്കം കൈകാര്യം ചെയ്യുന്നതിൽ വളരെയധികം വൈദഗ്ധ്യം നൽകുന്ന രണ്ട് രീതികളാണ്.