জাভাস্ক্রিপ্ট ব্যবহার করে টেবিলের সারিতে বোতামগুলিতে গতিশীলভাবে আইডি বরাদ্দ করা

জাভাস্ক্রিপ্ট টেবিলে বোতামের জন্য ডায়নামিক আইডি জেনারেশন বোঝা

জাভাস্ক্রিপ্ট ব্যবহার করে টেবিল এবং বোতামের মতো এইচটিএমএল উপাদানগুলি গতিশীলভাবে তৈরি করার সময়, সেই উপাদানগুলিতে অনন্য আইডি বরাদ্দ করা একটি চ্যালেঞ্জ হতে পারে। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন একটি টেবিলের প্রতিটি সারিতে পৃথক ইন্টারঅ্যাকশনের জন্য একটি অনন্য বোতামের প্রয়োজন হয়। এর মধ্যে ডায়নামিক আইডি বরাদ্দ করার চেষ্টা করার সময় বিকাশকারীরা প্রায়শই সমস্যার সম্মুখীন হন innerHTML একটি কোষের।

এই ক্ষেত্রে, লক্ষ্য হল একটি JSON অবজেক্ট থেকে টেবিল সারি তৈরি করা এবং প্রতিটি সারির বোতামে গতিশীলভাবে একটি অনন্য আইডি বরাদ্দ করা। যাইহোক, ভিতরে টেমপ্লেট লিটারাল ব্যবহার করে সাধারণ পদ্ধতি innerHTML আশানুরূপ কাজ নাও হতে পারে। স্ক্রিপ্টে পরে সেই বোতামগুলির সাথে রেফারেন্স বা ইন্টারঅ্যাক্ট করার চেষ্টা করার সময় এটি সমস্যার কারণ হতে পারে।

সমস্যা জাভাস্ক্রিপ্ট প্রক্রিয়ার উপায় থেকে উদ্ভূত হয় innerHTML এবং টেমপ্লেট আক্ষরিক। সঠিক পদ্ধতি ছাড়া, বোতাম এর আইডি ভুলভাবে প্রদর্শন করবে বা গতিশীলভাবে আপডেট করতে ব্যর্থ হবে, কর্মের জন্য নির্দিষ্ট সারিগুলিকে লক্ষ্য করা অসম্ভব করে তুলবে। এটি গতিশীল টেবিল প্রজন্মের একটি সাধারণ সমস্যা।

এই প্রবন্ধে, আমরা অন্বেষণ করব কীভাবে এই সমস্যাটির সমাধান করা যায় টেবিলের ঘরের মধ্যে বোতামগুলিতে সঠিকভাবে ডায়নামিক আইডি বরাদ্দ করে এমন একটি পদ্ধতি ব্যবহার করে যা নিশ্চিত করে যে প্রতিটি সারির জন্য বোতাম আইডিগুলি অনন্য। আমরা একটি কার্যকরী সমাধানও দেব যা আপনি আপনার নিজের প্রকল্পগুলিতে আবেদন করতে পারেন৷

জাভাস্ক্রিপ্টে ডায়নামিক টেবিল রো এবং বোতাম আইডি জেনারেশন

ডায়নামিক ফ্রন্ট-এন্ড ডেভেলপমেন্টে, এইচটিএমএল উপাদানগুলির জন্য অনন্য আইডি তৈরি করা প্রায়শই ব্যবহারকারীর মিথস্ক্রিয়া পরিচালনার জন্য গুরুত্বপূর্ণ, বিশেষ করে এমন পরিস্থিতিতে যেখানে একাধিক বোতাম বা ইনপুট ক্ষেত্রগুলিকে আলাদা করতে হবে। উপরে আলোচিত স্ক্রিপ্টগুলি দেখায় যে কীভাবে গতিশীলভাবে টেবিলের সারি এবং বোতামগুলি তৈরি করতে হয়, প্রতিটি বোতামকে একটি অনন্য আইডি বরাদ্দ করে যা টেবিলে তার সারির সাথে মিলে যায়। জাভাস্ক্রিপ্ট লুপ এবং স্ট্রিং সংযোজন ব্যবহার করে, আমরা নিশ্চিত করতে পারি যে প্রতিটি বোতামের একটি অনন্য শনাক্তকারী রয়েছে, যেমন "testbutton0", "testbutton1", এবং আরও অনেক কিছু। এটি একটি নির্দিষ্ট ইভেন্টকে ট্রিগার করে এমন বোতামটিকে সহজে সনাক্ত করার অনুমতি দেয়, যা এটিকে গতিশীল সামগ্রী তৈরির জন্য একটি ব্যবহারিক পদ্ধতিতে পরিণত করে।

এই উদাহরণে ব্যবহৃত মূল ফাংশনগুলির মধ্যে একটি table.insertRow(), যা একটি পূর্ব-বিদ্যমান HTML টেবিলে নতুন সারি সন্নিবেশ করায়। লুপের প্রতিটি পুনরাবৃত্তির জন্য, টেবিলে একটি নতুন সারি যোগ করা হয় এবং সেই সারির মধ্যে, আমরা দুটি ঘর তৈরি করি: একটি কর্মচারীর নামের জন্য এবং অন্যটি বোতামের জন্য। দ্বিতীয় কোষ ব্যবহার করে innerHTML বোতাম এবং এর গতিশীলভাবে তৈরি আইডি সন্নিবেশ করতে। তবে ব্যবহার করে innerHTML উপাদান তৈরি করতে এর সীমাবদ্ধতা রয়েছে, বিশেষ করে যখন এটি বোতাম আইডির মতো ভেরিয়েবলের উল্লেখ করার ক্ষেত্রে আসে, যা সঠিকভাবে পরিচালনা না করলে ত্রুটির দিকে পরিচালিত করে।

দ্বিতীয় সমাধানে প্রদর্শিত আরও নির্ভরযোগ্য পদ্ধতির ব্যবহার document.createElement() জাভাস্ক্রিপ্টের মাধ্যমে সরাসরি HTML উপাদান তৈরি করতে। এই পদ্ধতি উপাদান তৈরির উপর আরও ভাল নিয়ন্ত্রণ প্রদান করে এবং নিরাপদ, আরও মডুলার কোডের জন্য অনুমতি দেয়। প্রোগ্রাম্যাটিকভাবে বোতাম তৈরি করে এবং জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে আইডি বরাদ্দ করে, এই সমাধানটি সম্ভাব্য সমস্যাগুলি এড়ায় innerHTML এবং বিষয়বস্তু তৈরি করার জন্য একটি পরিষ্কার, আরও নিরাপদ উপায় প্রদান করে। উপরন্তু, এটি ব্যবহার করে ইভেন্ট শ্রোতাদের সরাসরি বোতামগুলিতে যোগ করা সহজ করে তোলে AddEventListener(), যা ইনলাইন ইভেন্ট হ্যান্ডলার এড়াতে সাহায্য করে।

সবশেষে, এর অন্তর্ভুক্তি event.target.id কোন বোতামে ক্লিক করা হয়েছে তা সনাক্ত করার জন্য গুরুত্বপূর্ণ। এই ইভেন্ট প্রপার্টিটি ইভেন্টের আইডি ক্যাপচার করে যা ইভেন্টটিকে ট্রিগার করেছে, মিথস্ক্রিয়াগুলির উপর সুনির্দিষ্ট নিয়ন্ত্রণের অনুমতি দেয়। উদাহরণস্বরূপ, যখন একটি বোতাম ক্লিক করা হয়, doSmth() ফাংশন বোতামের আইডিকে সতর্ক করে, যা নিশ্চিত করতে সাহায্য করে যে নির্দিষ্ট বোতামে ক্লিক করার ভিত্তিতে সঠিক পদক্ষেপ নেওয়া হয়েছে। কৌশলগুলির এই সংমিশ্রণ-গতিশীল সারি তৈরি, অনন্য আইডি অ্যাসাইনমেন্ট এবং ইভেন্ট হ্যান্ডলিং-এটিকে সামনের প্রান্তে ইন্টারেক্টিভ, ডেটা-চালিত টেবিল তৈরির জন্য একটি শক্তিশালী সমাধান করে তোলে।

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

জাভাস্ক্রিপ্ট টেবিলে ডায়নামিক আইডি জেনারেশন এবং ইন্টারঅ্যাকশন উন্নত করা

জাভাস্ক্রিপ্টের সাথে গতিশীলভাবে টেবিলের বিষয়বস্তু তৈরি করার সময় একটি প্রায়শই উপেক্ষা করা হয় তা হল স্কেলেবিলিটি এবং রক্ষণাবেক্ষণযোগ্যতার সম্ভাবনা। টেবিল সারির সংখ্যা বাড়ার সাথে সাথে কর্মক্ষমতা প্রভাবিত হতে পারে, বিশেষ করে যদি DOM ক্রমাগত আপডেট বা পুনর্নির্মাণ করা হয়। কর্মক্ষমতা অপ্টিমাইজ করার জন্য, আপনি DOM-এ যুক্ত করার আগে, একটি নথির খণ্ড ব্যবহার করে প্রথমে মেমরিতে সম্পূর্ণ টেবিল কাঠামো তৈরি করে সরাসরি DOM ম্যানিপুলেশনের সংখ্যা কমাতে পারেন। এটি রিফ্লো এবং পুনরায় রং করার প্রক্রিয়াগুলিকে কমিয়ে দেয়, যা বড় আকারের অ্যাপ্লিকেশনগুলিকে ধীর করে দিতে পারে।

ডায়নামিক টেবিল জেনারেশনের আরেকটি গুরুত্বপূর্ণ উপাদান হল আপনি কিভাবে ইভেন্ট ডেলিগেশন পরিচালনা করেন। প্রতিটি বোতামে পৃথক ইভেন্ট শ্রোতাদের যোগ করার সময় ছোট টেবিলের জন্য ভাল কাজ করে, এটি বড় ডেটাসেটের সাথে পারফরম্যান্সের সমস্যা হতে পারে। পরিবর্তে, ইভেন্ট ডেলিগেশন ব্যবহার করলে আপনি একটি প্যারেন্ট এলিমেন্টে (টেবিলের মতো) ইভেন্টগুলি শুনতে পারবেন এবং বোতামে ক্লিকগুলি আরও দক্ষতার সাথে প্রসেস করতে পারবেন। এইভাবে, আপনি টেবিলে শুধুমাত্র একটি ইভেন্ট শ্রোতাকে সংযুক্ত করেন এবং ক্লিক করা উপাদানের আইডির উপর ভিত্তি করে, আপনি সঠিক পদক্ষেপ নেওয়ার জন্য নির্ধারণ করতে পারেন।

সবশেষে, অ্যাক্সেসযোগ্যতা আরেকটি কারণ যা উপেক্ষা করা উচিত নয়। গতিশীলভাবে বোতাম বা অন্যান্য ইন্টারেক্টিভ উপাদানগুলি তৈরি করার সময়, এটি নিশ্চিত করা অপরিহার্য যে প্রতিটি উপাদান সমস্ত ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য, সহকারী প্রযুক্তি ব্যবহারকারীরা। উপযুক্ত যোগ করে aria-লেবেল বা ভূমিকা বোতামগুলিতে, আপনি আরও অন্তর্ভুক্ত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারেন। উপরন্তু, স্ক্রীন রিডার বা কীবোর্ড নেভিগেশনের সাথে আপনার টেবিলের পরীক্ষা করা আরও গতিশীল, অ্যাক্সেসযোগ্য ওয়েব অ্যাপ্লিকেশনে উপাদানগুলির সাথে কীভাবে ইন্টারঅ্যাক্ট করা হয় তা নিয়ে যে কোনও সমস্যা উন্মোচন করতে সহায়তা করতে পারে।