ٹیبل سیل کو شمار کرنے کے لیے جاوا اسکرپٹ میں مخصوص کلاس کا استعمال کیسے کریں۔

ٹیبل میں فعال کلاس شمار کے ساتھ ایک ماڈل کو متحرک کرنا

آپ کے ساتھ کام کرتے وقت ہر سیل کے مواد کی بنیاد پر حسب ضرورت رویے کا اطلاق کرنا چاہیں گے۔ ایچ ٹی ایم ایل ٹیبلز. مثال کے طور پر، آپ ٹیبل سیلز کو متحرک طور پر کلاسز تفویض کرنے کے لیے مخصوص پیٹرن یا معیار استعمال کر سکتے ہیں۔ اس کے نتیجے میں آپ کی میز زیادہ مفید اور دلکش بن سکتی ہے۔

اس مثال میں، مخصوص ضروریات کو پورا کرنے والے ٹیبل سیلز کا نام ایک کلاس ہوگا۔ فعال ان میں شامل کیا. اے جاوا اسکرپٹ فنکشن جو ہر سیل کی جانچ کرتا ہے، اس کے مواد کی تصدیق کرتا ہے، اور پھر کلاس کو مناسب طریقے سے لاگو کرتا ہے اسے ایسا کرنے کے لیے استعمال کیا جاتا ہے۔ یہ مخصوص خلیوں کو ان کے ڈیٹا کے مطابق منظم کرنے کا ایک نتیجہ خیز طریقہ ہے۔

درخواست دینے کے بعد فعال سیلز کے ذیلی سیٹ کے لیے کلاس، اس کلاس والے سیلز کی تعداد گننا ایک بار بار اگلا مرحلہ ہو سکتا ہے۔ اگر آپ کوئی واقعہ یا عمل شروع کرنا چاہتے ہیں، جیسا کہ ایک موڈل کھولنا جو گنتی کو ظاہر کرتا ہے، تو ان سیلز کو گننا کافی مددگار ثابت ہوسکتا ہے۔

یہ ٹیوٹوریل آپ کو سکھائے گا کہ کس طرح جاوا اسکرپٹ کو استعمال کرنے کے لیے سیلز کی تعداد کو فعال کلاس اور خود بخود ایک موڈل لانچ کرنا جو شمار کو ظاہر کرتا ہے۔ استعمال کرنا jQuery، حل سیدھا، موثر، اور لاگو کرنا آسان ہے۔

اسکرپٹ کو سمجھنا: خلیوں کی گنتی اور ایک ماڈل کو متحرک کرنا

پہلی اسکرپٹ کی مثال میں، ہر ٹیبل سیل کو بار بار دہرایا جاتا ہے، اس کے مواد کی جانچ کی جاتی ہے، اور ایک کلاس تفویض کی جاتی ہے جو کہ تشخیص پر منحصر ہے jQuery. یہ خصوصیت ہر ایک کے ذریعے تکرار کرنے سے ممکن ہوئی ہے۔ کا استعمال کرتے ہوئے میز میں اشیاء .each() طریقہ اس لوپ کے اندر دو مشروط چیک لاگو کرنے کے لیے ریگولر ایکسپریشنز استعمال کیے جاتے ہیں۔ یہ نمونے اس بات کی تصدیق کرتے ہیں کہ آیا ہر سیل کا مواد کسی خاص فارمیٹ پر قائم ہے۔ سیل حاصل کرتا ہے۔ فعال کلاس اگر مواد ایک پیٹرن کی پیروی کرتا ہے، جیسے کہ ایک نمبر اور ایک بڑا خط۔ خلیات کو متحرک طور پر درجہ بندی کرنے کے لیے، یہ ضروری ہے۔

کے ساتھ RegExp() کنسٹرکٹر، مماثل نمبروں کے لیے ایک باقاعدہ اظہار جس کے بعد حروف ہوتے ہیں۔ یہ تکنیک اس بات کو یقینی بناتی ہے کہ ڈیٹا والے سیلز، جیسے "1A" یا "3C" کو پہچانا جاتا ہے اور موجودہ کلاس کے ساتھ لیبل لگا ہوا ہے۔ سیل کو ایک علیحدہ کلاس موصول ہوتی ہے جسے کہا جاتا ہے۔ کوئی نہیں اگر مواد ایک مختلف پیٹرن سے میل کھاتا ہے، جیسے "c" کے بعد ایک عدد۔ اس سے جدول میں موجود ڈیٹا کو زیادہ درست طریقے سے درجہ بندی کرنا ممکن ہو جاتا ہے۔ مزید برآں، the addClass() طریقہ اس بات کی ضمانت دیتا ہے کہ سیلز ان کلاسز کو شامل کر سکتے ہیں بغیر ان کلاسوں کو حذف کیے جو ان کے پاس پہلے سے موجود ہیں۔

اگلا مرحلہ مناسب سیلز کو شمار کرنا اور ایک موڈل شروع کرنا ہے جب ان سب کو ایکٹو کلاس کے ساتھ ٹیگ کیا جائے۔ جب بھی سیل ایکٹو کلاس حاصل کرتا ہے، گنتی میں اضافہ ہوتا ہے اور ایک متغیر میں محفوظ کیا جاتا ہے فعال شمار. اس شمار کو استعمال کرتے ہوئے ٹیبل میں کوالیفائنگ سیلز کی تعداد کا پتہ لگانا ضروری ہے۔ کا استعمال کرتے ہوئے .dialog() jQuery UI سے فنکشن، گنتی ختم ہونے پر ایک موڈل تیار ہوتا ہے۔ دی آٹو اوپن: سچ attribute موڈل کو خود بخود کھولنے کی اجازت دیتا ہے۔ فعال خلیوں کی تعداد موڈل کے اندر دکھائی گئی ہے۔

دوسری صورت میں، ونیلا جاوا اسکرپٹ ایک جیسی طریقہ کار کو نقل کرنے کے لیے استعمال کیا جاتا ہے۔ querySelectorAll() تمام ٹیبل سیلز کو منتخب کرنے کے لیے اس نقطہ نظر میں jQuery کی جگہ استعمال کیا جاتا ہے، اور ایک سیدھا ہر ایک کے لیے() لوپ ہر سیل کے ذریعے دہراتی ہے۔ jQuery کے حل کی طرح سیل کے مواد سے ملنے کے لیے ریگولر ایکسپریشنز کا استعمال کیا جاتا ہے۔ اگر کوئی مماثلت دریافت ہوتی ہے، تو ایکٹیو کاؤنٹ کو اپ ڈیٹ کیا جاتا ہے اور ایکٹیو کلاس کو استعمال کرتے ہوئے شامل کیا جاتا ہے۔ classList.add() طریقہ بالآخر، 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);
});

جاوا اسکرپٹ میں سیل سلیکشن اور کلاس ہینڈلنگ پر توسیع

کے ساتھ کام کرنا جاوا اسکرپٹ اور ایچ ٹی ایم ایل ٹیبلز صارف کے ان پٹ یا مواد کے جواب میں کلاسوں کو متحرک طور پر تبدیل کرنے کی صلاحیت بھی شامل ہے۔ آپ صرف خلیات کو گننے سے زیادہ کر سکتے ہیں۔ آپ صارف کے ان پٹ کو بھی سنبھال سکتے ہیں اور ٹیبل کے مواد کو فوری طور پر تبدیل کر سکتے ہیں۔ مثال کے طور پر، جیسے طریقوں کا استعمال کرتے ہوئے removeClass() jQuery میں یا classList.remove() ونیلا جاوا اسکرپٹ میں، جب صارف ٹیبل سیل پر کلک کرتا ہے تو آپ کلاس کو متحرک طور پر تبدیل کر سکتے ہیں، ہائی لائٹ کر سکتے ہیں یا اسے ہٹا سکتے ہیں۔ اس کے نتیجے میں ٹیبلز کافی زیادہ انٹرایکٹو ہو جاتے ہیں، اور اصل وقت میں مواد کی تازہ کاری پر مبنی مزید تخصیص ممکن ہے۔

ریئل ٹائم ڈیٹا کی نمائش کرنے والی ایک جدول جہاں کلاس کی تبدیلی کے لحاظ سے مخصوص سیلز کو بصری طور پر الگ کرنے کی ضرورت ہوتی ہے اس کے لیے استعمال کا ایک مفید کیس ہوگا۔ تقریب کے سامعین کا استعمال کرکے ان تبدیلیوں کا سبب بننے والے فنکشنز کو باندھنا آسان ہے۔ جاوا اسکرپٹ میں، مثال کے طور پر، آپ استعمال کر سکتے ہیں۔ addEventListener() خاص سیلز پر ہونے والے واقعات کو سننے کے لیے، جیسے کلکس یا کلیدی پریس۔ کی تعداد کی عکاسی کرنے والے کاؤنٹر میں اضافی کلاس ترمیمات یا یہاں تک کہ اپ ڈیٹس فعال ٹیبل میں خلیات اس تعامل کے نتیجے میں ہوسکتے ہیں۔

آپ ان حالات کے بارے میں بھی سوچ سکتے ہیں جن میں سیلز کو صارف کے کسی ان پٹ کے بغیر خود بخود اپ ڈیٹ ہونا چاہیے۔ ٹیبل کے مواد کو وقفہ یا AJAX کالز کے ذریعے مسلسل اپ ڈیٹ اور مانیٹر کیا جا سکتا ہے۔ باقاعدہ اظہار اور طریقے جیسے setInterval() ٹیبل کو اپنی کلاسز کو خود بخود تبدیل کرنے اور حد تک پہنچنے پر ایک ماڈل لانچ کرنے کی اجازت دیں۔ ٹیبلز کو اب مزید متحرک ایپلی کیشنز میں استعمال کیا جا سکتا ہے، جیسے ڈیش بورڈز اور ڈیٹا سے چلنے والی ترتیبات۔