الدرس 3 من 8

جدول قابل للترتيب

هدف الدرس

رأس يرتّب الجدول عند الضغط ويعلن حالته

01

الشرح

يحتاج الجدول القابل للترتيب إلى ثلاثة أشياء: رأس عمود يمكن الضغط عليه، وترتيب ينعكس اتجاهه عند الضغطة الثانية، والخاصية aria-sort لتعلن حالة الترتيب.

ولـ aria-sort ثلاث قيم هي ascending وdescending وnone، ولا يحمل حالة الترتيب إلا عمود واحد في كل لحظة.

ورتّب البيانات نفسها لا عناصر الـ DOM، أي رتّب المصفوفة ثم أعد رسم الجدول منها، لأنّ من يرتّب الصفوف في مكانها يكتب كودًا أطول ينكسر عند أول تعديل.

02

المطلوب

اجعل الضغط على رأس العمود يرتّب الجدول به، والضغط عليه مرّة ثانية يعكس الاتجاه، وحدّث aria-sort مع كل ضغطة.

الفحوص

6 فحوص
  1. الجدول يبدأ بثلاثة صفوف
  2. الترتيب بالدرجة تصاعديًّا
  3. الضغطة الثانية تعكس الاتجاه
  4. السمة aria-sort تعلن الحالة
  5. عمود واحد فقط يحمل حالة الترتيب
  6. الترتيب بالاسم يعمل والمصفوفة الأصلية لم تتغيّر
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تبني هنا بنفسك ومن الصفر مكوّنات تجدها في كل موقع تقريبًا، مثل التبويبات والنوافذ الحوارية والجداول والإشعارات وعارض الشرائح.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعتان.

index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 6 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تبني هنا بنفسك ومن الصفر مكوّنات تجدها في كل موقع تقريبًا، مثل التبويبات والنوافذ الحوارية والجداول والإشعارات وعارض الشرائح.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعتان.