تعيين المعرفات ديناميكيًا للأزرار في صفوف الجدول باستخدام JavaScript

فهم إنشاء المعرفات الديناميكية للأزرار في جداول JavaScript

عند إنشاء عناصر HTML ديناميكيًا مثل الجداول والأزرار باستخدام JavaScript، قد يمثل تعيين معرفات فريدة لهذه العناصر تحديًا. وهذا مهم بشكل خاص عندما يحتاج كل صف في الجدول إلى زر فريد للتفاعلات المنفصلة. غالبًا ما يواجه المطورون مشكلات عند محاولة تعيين معرفات ديناميكية داخل InnerHTML من الخلية.

في هذه الحالة، الهدف هو إنشاء صفوف جدول من كائن JSON وتعيين معرف فريد ديناميكيًا للزر الموجود داخل كل صف. ومع ذلك، فإن الأساليب الشائعة التي تستخدم القيم الحرفية للقالب داخل InnerHTML قد لا تعمل كما هو متوقع. يمكن أن يسبب هذا مشكلات عند محاولة الرجوع إلى تلك الأزرار أو التفاعل معها لاحقًا في البرنامج النصي.

تنشأ المشكلة من الطريقة التي تعالج بها JavaScript InnerHTML والحرف القالب. بدون النهج الصحيح، الزر بطاقة تعريف سيتم عرضه بشكل غير صحيح أو سيفشل في التحديث ديناميكيًا، مما يجعل من المستحيل استهداف صفوف معينة للإجراءات. يعد هذا خطأً شائعًا في إنشاء الجدول الديناميكي.

في هذه المقالة، سوف نستكشف كيفية حل هذه المشكلة عن طريق تعيين معرفات ديناميكية بشكل صحيح للأزرار الموجودة داخل خلايا الجدول باستخدام أسلوب يضمن أن معرفات الأزرار فريدة لكل صف. سنوفر أيضًا حلاً عمليًا يمكنك تطبيقه في مشاريعك الخاصة.

إنشاء صف الجدول الديناميكي ومعرف الزر في JavaScript

في تطوير الواجهة الأمامية الديناميكية، غالبًا ما يكون إنشاء معرفات فريدة لعناصر HTML أمرًا ضروريًا للتعامل مع تفاعلات المستخدم، خاصة في السيناريوهات التي تحتاج إلى تمييز أزرار متعددة أو حقول إدخال. توضح البرامج النصية التي تمت مناقشتها أعلاه كيفية إنشاء صفوف وأزرار الجدول ديناميكيًا، مع تعيين معرف فريد لكل زر يتوافق مع صفه في الجدول. باستخدام حلقات JavaScript وتسلسل السلاسل، يمكننا التأكد من أن كل زر له معرف فريد، مثل "testbutton0" و"testbutton1" وما إلى ذلك. يتيح ذلك التعرف بسهولة على الزر الذي يطلق حدثًا معينًا، مما يجعله أسلوبًا عمليًا لإنشاء المحتوى الديناميكي.

إحدى الوظائف الأساسية المستخدمة في هذا المثال هي table.insertRow()، والذي يقوم بإدراج صفوف جديدة في جدول HTML موجود مسبقًا. لكل تكرار للحلقة، تتم إضافة صف جديد إلى الجدول، وداخل هذا الصف، نقوم بإنشاء خليتين: واحدة لاسم الموظف وأخرى للزر. تستخدم الخلية الثانية InnerHTML لإدراج الزر ومعرفه الذي تم إنشاؤه ديناميكيًا. ومع ذلك، باستخدام InnerHTML لإنشاء العناصر حدوده، خاصة عندما يتعلق الأمر بالإشارة إلى المتغيرات مثل معرفات الأزرار، مما يؤدي إلى حدوث أخطاء إذا لم يتم التعامل معها بشكل صحيح.

يستخدم النهج الأكثر موثوقية الموضح في الحل الثاني document.createElement() لإنشاء عناصر HTML مباشرة من خلال JavaScript. توفر هذه الطريقة تحكمًا أفضل في إنشاء العناصر وتسمح بتعليمات برمجية أكثر أمانًا وأكثر معيارية. من خلال إنشاء الأزرار برمجيًا وتعيين المعرفات ديناميكيًا من خلال JavaScript، يتجنب هذا الحل المشكلات المحتملة الناجمة عن InnerHTML ويوفر طريقة أكثر نظافة وأمانًا لإنشاء المحتوى. بالإضافة إلى ذلك، فإنه يسهل إضافة مستمعي الأحداث مباشرةً إلى الأزرار التي تستخدمها addEventListener()، مما يساعد على تجنب معالجات الأحداث المضمنة.

وأخيرًا، إدراج Event.target.id يعد أمرًا بالغ الأهمية لتحديد الزر الذي تم النقر عليه. تلتقط خاصية الحدث معرف العنصر الذي أدى إلى تشغيل الحدث، مما يسمح بالتحكم الدقيق في التفاعلات. على سبيل المثال، عند النقر على زر، يتم دوسمث () تقوم الوظيفة بتنبيه معرف الزر، مما يساعد على ضمان اتخاذ الإجراء الصحيح بناءً على الزر المحدد الذي تم النقر عليه. هذا المزيج من التقنيات - إنشاء الصف الديناميكي وتعيين المعرف الفريد ومعالجة الأحداث - يجعله حلاً قويًا لإنشاء جداول تفاعلية تعتمد على البيانات في الواجهة الأمامية.

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>

تعزيز إنشاء المعرفات الديناميكية والتفاعل في جداول JavaScript

أحد الجوانب التي غالبًا ما يتم تجاهلها عند إنشاء محتوى الجدول ديناميكيًا باستخدام JavaScript هو إمكانية التوسع وقابلية الصيانة. مع زيادة عدد صفوف الجدول، يمكن أن يتأثر الأداء، خاصة إذا كان DOM يتم تحديثه أو إعادة بنائه باستمرار. لتحسين الأداء، يمكنك تقليل عدد عمليات معالجة DOM المباشرة عن طريق إنشاء بنية الجدول بالكامل في الذاكرة أولاً، باستخدام جزء من المستند، قبل إلحاقه بـ DOM. وهذا يقلل من عمليات إعادة التدفق وإعادة الطلاء، مما قد يؤدي إلى إبطاء التطبيقات واسعة النطاق.

هناك عنصر مهم آخر في إنشاء الجدول الديناميكي وهو كيفية التعامل مع تفويض الأحداث. على الرغم من أن إضافة مستمعي الأحداث الفرديين إلى كل زر يعمل بشكل جيد مع الجداول الأصغر حجمًا، إلا أنه يمكن أن يؤدي إلى مشكلات في الأداء مع مجموعات البيانات الأكبر حجمًا. بدلاً من ذلك، يتيح لك استخدام تفويض الأحداث الاستماع إلى الأحداث الموجودة على العنصر الأصلي (مثل الجدول) ومعالجة النقرات على الزر بشكل أكثر كفاءة. بهذه الطريقة، يمكنك إرفاق مستمع حدث واحد فقط بالجدول، واستنادًا إلى معرف العنصر الذي تم النقر عليه، يمكنك تحديد الإجراء المناسب الذي يجب اتخاذه.

وأخيرًا، تعد إمكانية الوصول عاملاً آخر لا ينبغي إغفاله. عند إنشاء أزرار أو عناصر تفاعلية أخرى ديناميكيًا، من الضروري التأكد من إمكانية الوصول إلى كل عنصر لجميع المستخدمين، بما في ذلك أولئك الذين يستخدمون التقنيات المساعدة. وذلك بإضافة المناسب تسميات الأغنية أو الأدوار إلى الأزرار، يمكنك توفير تجربة مستخدم أكثر شمولاً. علاوة على ذلك، يمكن أن يساعد اختبار الجدول الخاص بك باستخدام برامج قراءة الشاشة أو التنقل باستخدام لوحة المفاتيح في الكشف عن أي مشكلات تتعلق بكيفية تفاعل العناصر في تطبيق ويب أكثر ديناميكية ويمكن الوصول إليه.