إضافة صفوف جداول بكفاءة باستخدام jQuery وجافا سكريبت

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

محتويات الجدول

• إضافة صفوف الجدول باستخدام append() و prepend() في jQuery
• إضافة صفوف الجدول باستخدام جافا سكريبت العادية

إضافة صفوف الجدول باستخدام append() و prepend() في jQuery

يوفر jQuery طريقة موجزة وفعالة لمعالجة DOM. تتكامل طريقتا append() و prepend() بسلاسة مع هياكل الجدول.

لنعتبر جدول HTML نموذجيًا:

<table id="myTable">
  <thead>
    <tr>
      <th>الاسم</th>
      <th>العمر</th>
    <tr>
  </thead>
  <tbody>
    <!-- سيتم إضافة الصفوف هنا -->
  </tbody>
</table>

لإضافة صف جديد باستخدام jQuery:

// الحصول على جسم الجدول
let $tableBody = $('#myTable tbody');

// إنشاء الصف الجديد
let $newRow = $('<tr>');

// إنشاء وإضافة الخلايا
$newRow.append('<td>اسم جديد</td>');
$newRow.append('<td>30</td>');

// إضافة الصف إلى جسم الجدول
$tableBody.append($newRow); 

يقوم هذا المقطع من التعليمات البرمجية بتحديد جسم الجدول، وإنشاء عنصر صف جديد، وإضافة خلايا البيانات، وإضافة الصف الكامل إلى الجدول. للإضافة في البداية (إضافة إلى البداية)، استخدم ببساطة $tableBody.prepend($newRow);.

في الحالات الأكثر تعقيدًا أو إضافة صفوف متعددة، يمكن أن يكون إنشاء سلسلة HTML للصف مباشرةً أكثر كفاءة:

let newRowHTML = `<tr><td>اسم آخر</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);

تذكر تطهير البيانات التي يقدمها المستخدم لمنع ثغرات XSS.

إضافة صفوف الجدول باستخدام جافا سكريبت العادية

إن فهم النهج الأصلي لجافا سكريبت يوفر فهمًا أعمق لمعالجة DOM. على الرغم من كونه أكثر تفصيلًا، إلا أنه يتجنب الاعتماديات الخارجية.

let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');

nameCell.textContent = 'اسم آخر';
ageCell.textContent = '40';

newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);

يقوم هذا الرمز بمعالجة DOM مباشرةً باستخدام طرق جافا سكريبت القياسية. اختر الطريقة التي تناسب احتياجات مشروعك ومستوى راحتك مع jQuery. تذكر تضمين مكتبة jQuery إذا كنت تستخدم أمثلة jQuery: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>