انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #7 من درس: حلقات التكرار loops - جُملة for في لغة جافا سكريبت

Create HTML table with for loop in JavaScript إنشاء جدول HTML عن طريق for loop بلغة جافا سكريبت

ستتعلم في هذا الدرس حلقات التكرار loops - وجُملة for في لغة جافا سكريبت وستتعلم عمل تكرار علي مجموعة بيانات محفوظة بداخل مصفوفة array وعرضهم في list وطريقة عرضهم في جدول منسق بلغات html + css وايضاً ستتعلم استخدام itrator بداخل الحلقات والشروط conditions وقيم التهيئة initialization.

1 صفوف تعليمية
جافا سكريبت
11,729 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكننا إضافة مجموعة من البيانات بداخل html table سواء كانت بداخل المصفوفة array او بداخل كائن object بسهولة بواسطة حلقات التكرار for loop.

Create HTML Table With Loop

يظهر الجدول بهذا الشكل بعد عرض البيانات

for loop with html table

عرض مجموعة بيانات محفوظة بداخل مصفوفة array عن طريق حلقات التكرار for loop بداخل جدول html عن طريق document.write في لغة جافا سكريبت.

HTML 
var courses = ['HTML','CSS','PHP','JS','JQuery','MY SQL','Angular'];
document.write("<table class='table'>");
    for (var i=0; i < courses.length; i++) {
    document.write("<tr>");     
    document.write("<td>"+ (i + 1)  +"</td><td>"+ courses[i] +"</td>");
    document.write("</tr>");
  }
document.write("</table>");
جرّب بنفسك

جميع فقرات هذا الدرس (حلقات التكرار loops - جُملة for في لغة جافا سكريبت)