سيوضح منشور المدونة هذا عملية إنشاء جدول ديناميكي في JavaScript.
كيفية إنشاء جدول ديناميكيًا في JavaScript؟
دعنا نرى مثالاً يشرح كيفية إنشاء جدول ديناميكي في جافا سكريبت.
مثال
للبدء ، اكتب الأسطر التالية في مستند HTML جديد لإنشاء نموذج يأخذ البيانات ثم يعرضها في جدول عن طريق إضافتها ديناميكيًا:
< معرف شعبة = 'myform' >
< h4 > املأ النموذج أدناه : h4 >
< ضع الكلمة المناسبة > اسم : ضع الكلمة المناسبة >
< نوع الإدخال = 'نص' هوية شخصية = 'اسم' > < ر > < ر >
< ضع الكلمة المناسبة > جنس : ضع الكلمة المناسبة >
< نوع الإدخال = 'نص' هوية شخصية = 'جنس' > < ر > < ر >
< ضع الكلمة المناسبة > تعيين : ضع الكلمة المناسبة >
< نوع الإدخال = 'نص' هوية شخصية = 'تعيين' > < ر > < ر >
< ضع الكلمة المناسبة > انضمام تاريخ : ضع الكلمة المناسبة >
< نوع الإدخال = 'تاريخ' هوية شخصية = 'تاريخ' > < ر > < ر >
< معرف الزر = 'يضيف' القيمة = 'يضيف' > أضف البيانات إلى الجدول زر >
شعبة >
في مقتطف الشفرة أعلاه:
- أولاً ، قم بإنشاء عنوان ' املأ النموذج أدناه: '.
- إنشاء حقول الإدخال لـ ' اسم '،' جنس '،' تعيين '، و ' تاريخ الانضمام 'مع المعرف المخصص' اسم '،' جنس '،' تعيين '، و ' تاريخ على التوالي ، لأخذ قيم الإدخال من المستخدم.
- تُستخدم هذه المعرفات للحصول على مراجع العناصر في JavaScript.
- بعد ذلك ، أنشئ زرًا باستخدام ' عند النقر 'التي ستستدعي' addTableRow () ”في ملف نصي ، لإضافة البيانات وإظهارها في جدول:
هنا ، في ملف HTML ، اكتب هذه السطور من التعليمات البرمجية لإنشاء هيكل جدول ، حيث ستتم إضافة البيانات ديناميكيًا:
< شعبة >
< h4 > سجل الموظف ب > h4 >
< المركز >
< معرف الجدول = 'بيانات الجدول' الحدود = '1' وسادة الخلية = 'اثنين' >
< آر >
< td > < ب > اسم ب > td >
< td > < ب > جنس ب > td >
< td > < ب > تعيين ب > td >
< td > < ب > تاريخ الانضمام ب > td >
آر >
الطاولة >
المركز >
شعبة >
في الكود أعلاه:
- إنشاء جدول بالمعرف ' tableData 'التي سيتم استخدامها في ملف البرنامج النصي للحصول على مرجع هذا الجدول ثم إضافة البيانات إليه.
- يحتوي الجدول على أربعة أعمدة ، ' اسم '،' جنس '،' تعيين '، و ' تاريخ الانضمام 'التي ستخزن البيانات وفقًا لأسماء الأعمدة.
سيؤدي تشغيل ملف HTML إلى إخراج المتصفح التالي:
دعنا نضيف وظائف لإنشاء الجداول بشكل ديناميكي باستخدام جافا سكريبت. في ملف البرنامج النصي أو العلامة ، استخدم الكود أدناه الذي سينشئ جدولًا ديناميكيًا:
وظيفة addTableRow ( ) {كنت اسم = وثيقة. getElementById ( 'اسم' ) ؛
كنت جنس = وثيقة. getElementById ( 'جنس' ) ؛
كنت تعيين = وثيقة. getElementById ( 'تعيين' ) ؛
كنت تاريخ = وثيقة. getElementById ( 'تاريخ' ) ؛
كنت الطاولة = وثيقة. getElementById ( 'بيانات الجدول' ) ؛
كنت rowCount = الطاولة. صفوف . الطول ؛
كنت صف = الطاولة. الصف إدراج ( rowCount ) ؛
صف. أدخل الخلية ( 0 ) . داخلي HTML = اسم. القيمة ؛
صف. أدخل الخلية ( 1 ) . داخلي HTML = جنس. القيمة ؛
صف. أدخل الخلية ( اثنين ) . داخلي HTML = تعيين. القيمة ؛
صف. أدخل الخلية ( 3 ) . داخلي HTML = تاريخ. القيمة ؛
}
في المقتطف أعلاه:
- أولاً ، حدد وظيفة ' addTableRow () 'الذي سيؤدي إلى تشغيل حدث النقر على زر HTML.
- بعد ذلك ، احصل على مرجع جميع حقول الإدخال واحدًا تلو الآخر باستخدام المعرفات المخصصة لكل منها باستخدام ' getelementById () 'الطريقة وتخزينها في المتغيرات.
- سيتم استخدام هذه المتغيرات للحصول على قيمة حقول الإدخال باستخدام HTML ' القيمة 'وقم بتعيينها في الخلايا الفردية في الجدول باستخدام' داخلي HTML ' منشأه.
- أضف صفوفًا في جدول باستخدام ' الجدول. الصفوف. الطول 'ثم تخزين القيم فيه.
انتاج |
يشير الإخراج أعلاه إلى أن الجدول الديناميكي قد تم إنشاؤه بنجاح عن طريق إضافة البيانات في نموذج باستخدام JavaScript.
استنتاج
يتم إنشاء الجدول الديناميكي باستخدام خصائص HTML المختلفة باستخدام طرق JavaScript محددة مسبقًا. أولاً ، قم بإنشاء نموذج في ملف HTML ثم احصل على مرجع الحقول باستخدام طرق JavaScript محددة مسبقًا مثل ' getElementById () 'ثم استرداد القيم التي تم إدخالها باستخدام' القيمة ' منشأه. عيّن هذه القيم في أعمدة الجدول باستخدام ' داخلي HTML ' منشأه. يوضح منشور المدونة هذا عملية إنشاء جدول ديناميكي في JavaScript.