إضافة صف جدول في jQuery: دليل تعليمي للمبتدئين والمحترفين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

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

\n\n

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

\n\n

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

\n\n

لماذا jQuery بدلاً من JavaScript الخالص؟

\n\n

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

\n\n

HTML الأساسي لتجاربنا

\n\n

في البداية، سنحتاج إلى جدول بسيط. إليك ترميزه - انسخه إلى ملف HTML الخاص بك أو إلى بيئة اختبار مثل CodePen.

\n\n

\n<!DOCTYPE html>\n<html lang="ar">\n<head>\n    <meta charset="UTF-8">\n    <title>إضافة صف إلى جدول jQuery</title>\n    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n\n<h2>قائمة الموظفين</h2>\n<table id="employees" border="1">\n    <thead>\n        <tr>\n            <th>الاسم</th>\n            <th>المنصب</th>\n            <th>الراتب</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>آنا</td>\n            <td>مطور</td>\n            <td>150,000 ₽</td>\n        </tr>\n        <tr>\n            <td>إيفان</td>\n            <td>مصمم</td>\n            <td>120,000 ₽</td>\n        </tr>\n    </tbody>\n</table>\n\n<button id="addRow">إضافة صف</button>\n\n<script>\n// هنا سيكون كود jQuery الخاص بنا\n</script>\n\n</body>\n</html>\n

\n\n

لاحظ: الجدول يحتوي على thead (رأس) و tbody (جسم). هذا هو الهيكل الدلالي الصحيح. إضافة صف إلى جدول jQuery سنقوم بها في tbody تحديدًا، وليس في الجدول نفسه - حتى لا نكسر العناوين.

\n\n

الطريقة رقم 1: jQuery append - الكلاسيكية

\n\n

الطريقة الأكثر شيوعًا هي استخدام طريقة .append(). تقوم هذه الطريقة بإضافة المحتوى في نهاية العنصر المحدد. في حالتنا - في نهاية tbody.

\n\n

لنفترض أننا نريد إضافة موظف جديد. سيكون الكود كالتالي:

\n\n

\n$('#addRow').on('click', function() {\n    var newRow = '<tr>' +\n                 '<td>بيتر</td>' +\n                 '<td>مدير</td>' +\n                 '<td>100,000 ₽</td>' +\n                 '</tr>';\n    $('#employees tbody').append(newRow);\n});\n

\n\n

كل شيء عبقري ببساطته: نقوم بتجميع سلسلة HTML تحتوي على صف الجدول الجديد وإدراجها باستخدام jQuery إضافة صف جدول بطريقة append. الآن، مع كل نقرة على الزر، يظهر بيتر المدير في الجدول.

\n\n

هام: إذا لم يكن لديك tbody في الترميز، فقد يقوم jQuery بإضافة الصف مباشرة إلى table، ولكن في هذه الحالة قد يتم إدراجه في المكان الخطأ. استخدم دائمًا tbody!

\n\n