سيستخدم هذا الدليل JavaScript لشرح الإجراء الخاص بإضافة صف إلى جدول.
كيفية إضافة صف إلى جدول HTML باستخدام JavaScript؟
لإضافة صف في جدول ، استخدم الإجراءات التالية:
دعونا نتحقق من كل إجراء على حدة.
الطريقة 1: إضافة صف إلى جدول HTML باستخدام أسلوب insertRow ()
ال ' الصف إدراج() 'طريقة لإضافة صف جديد في بداية الجدول. يقوم بإنشاء عنصر
إذا كنت تنوي إضافة الصف في آخر / نهاية الجدول ، فقم بتمرير الفهرس ' -1 'كحجة.
بناء الجملة
استخدم الصيغة التالية لإضافة صفوف في جدول بمساعدة طريقة insertRow ():
الطاولة. الصف إدراج ( فهرس ) ؛
هنا، ' فهرس 'يشير إلى الموضع الذي تريد إضافة صف جديد إليه ، كما هو الحال في نهاية الجدول أو في البداية.
مثال 1: إضافة صف في أعلى / بداية الجدول
هنا ، سننشئ جدولًا وزرًا في ملف HTML باستخدام HTML <جدول> و <زر> العلامات. يحتوي الجدول على ثلاثة صفوف وثلاثة أعمدة أو خلايا:
< معرف الجدول = 'الطاولة' >< آر >
< td > خلية الصف 1 td >
< td > خلية الصف 1 td >
< td > خلية الصف 1 td >
آر >
< آر >
< td > خلية الصف اثنين td >
< td > خلية الصف اثنين td >
< td > خلية الصف اثنين td >
آر >
< آر >
< td > خلية الصف 3 td >
< td > خلية الصف 3 td >
< td > خلية الصف 3 td >
آر >
الطاولة >
< ر >
بعد ذلك ، أنشئ زرًا يستدعي الخيار ' اضف سطر() 'عند النقر عليه:
< نوع الزر = 'زر' عند النقر = 'اضف سطر()' > انقر لإضافة صف أعلى الجدول زر >لتصميم الجدول ، سنقوم بتعيين حدود كل خلية والجدول كما هو موضح أدناه:
الجدول ، الدفتيريا {الحدود : 1 بكسل أسود خالص ؛
}
الآن ، سنضيف صفوفًا في الجدول أعلى / بداية الجدول باستخدام JavaScript. للقيام بذلك ، حدد وظيفة تسمى ' اضف سطر() 'التي سيتم استدعاؤها في حدث onclick () على الزر. ثم ، قم بإحضار الجدول الذي تم إنشاؤه باستخدام ' getElementById () ' طريقة. بعد ذلك ، اتصل بـ ' الصف إدراج() 'عن طريق تمرير' 0 'الفهرس كمعامل يشير إلى أنه سيتم إضافة الصف في بداية الجدول.
ثم ، استدعي ' insertCell () 'عن طريق تمرير الفهارس التي توضح عدد الخلايا التي ستتم إضافتها إلى الصف. أخيرًا ، أضف البيانات النصية أو النص في الخلايا باستخدام ' داخلي HTML ' منشأه:
الوظيفة ( ) {فار الجدول = وثيقة. getElementById ( 'الطاولة' ) ؛
كان صف = صف الجدول. الصف إدراج ( 0 ) ؛
أين الخلية 1 = صف. أدخل الخلية ( 0 ) ؛
أين الخلية 2 = صف. أدخل الخلية ( 1 ) ؛
أين الخلية 3 = صف. أدخل الخلية ( اثنين ) ؛
الخلية 1. داخلي HTML = 'خلية الصف الجديد' ؛
الخلية 2. داخلي HTML = 'خلية الصف الجديد' ؛
cell3. داخلي HTML = 'خلية الصف الجديد' ؛
}
كما ترى في الإخراج ، يتم إضافة الصف الجديد أعلى الجدول الموجود عن طريق النقر فوق الزر:
مثال 2: إضافة صف في نهاية الجدول
إذا كنت تريد إدراج صف في آخر / نهاية الجدول ، فمرر ' -1 'الفهرس إلى' الصف إدراج() ' طريقة. سيضيف الصف أخيرًا عند النقر فوق الزر:
الوظيفة ( ) {فار الجدول = وثيقة. getElementById ( 'الطاولة' ) ؛
كان صف = صف الجدول. الصف إدراج ( - 1 ) ؛
أين الخلية 1 = صف. أدخل الخلية ( 0 ) ؛
أين الخلية 2 = صف. أدخل الخلية ( 1 ) ؛
أين الخلية 3 = صف. أدخل الخلية ( اثنين ) ؛
الخلية 1. داخلي HTML = 'خلية الصف الجديد' ؛
الخلية 2. داخلي HTML = 'خلية الصف الجديد' ؛
cell3. داخلي HTML = 'خلية الصف الجديد' ؛
}
انتاج |
دعنا ننتقل إلى الطريقة الأخرى!
الطريقة الثانية: إضافة صف إلى جدول HTML عن طريق إنشاء عنصر جديد
هناك طريقة أخرى لإضافة صف في جدول تقوم بإنشاء عناصر جديدة باستخدام طرق JavaScript ، بما في ذلك ' createElement () 'و' إلحاق الطفل() ' طريقة. يُنشئ createElement () عنصري
بناء الجملة
اتبع بناء الجملة المقدم لإنشاء عنصر جديد لإضافة صف في جدول باستخدام JavaScript:
وثيقة. خلق العنصر ( 'tr' ) ؛هنا ، ' آر 'هو صف الجدول.
مثال
سنستخدم الآن نفس الجدول الذي تم إنشاؤه مسبقًا في HTML مع ملف CSS ، ولكن في ملف JavaScript ، سنستخدم ' createElement () ' طريقة. بعد ذلك ، أضف البيانات أو النص في الخلايا باستخدام ' داخلي HTML ' منشأه. أخيرًا ، استدعاء ' إلحاق الطفل() 'التي ستضيف الخلايا في صف واحد ثم الصف في جدول:
الوظيفة ( ) {فار الجدول = وثيقة. getElementById ( 'الطاولة' ) ؛
كان صف = وثيقة. خلق العنصر ( 'tr' ) ؛
أين الخلية 1 = وثيقة. خلق العنصر ( 'td' ) ؛
أين الخلية 2 = وثيقة. خلق العنصر ( 'td' ) ؛
أين الخلية 3 = وثيقة. خلق العنصر ( 'td' ) ؛
الخلية 1. داخلي HTML = 'خلية الصف الجديد' ؛
الخلية 2. داخلي HTML = 'خلية الصف الجديد' ؛
cell3. داخلي HTML = 'خلية الصف الجديد' ؛
صف. إلحاق الطفل ( الخلية 1 ) ؛
صف. إلحاق الطفل ( الخلية 2 ) ؛
صف. إلحاق الطفل ( cell3 ) ؛
صف الجدول. إلحاق الطفل ( صف ) ؛
}
يوضح الناتج أنه تمت إضافة الصف الجديد بنجاح في نهاية الجدول:
قمنا بتجميع جميع الطرق لإضافة صف في جدول باستخدام JavaScript.
استنتاج
لإضافة صف في جدول ، استخدم الطريقتين التاليتين: طريقة insertRow () أو إنشاء عنصر جديد باستخدام أساليب JavaScript المحددة مسبقًا ، بما في ذلك طريقة appendChild () وطريقة createElement (). يمكنك إضافة صف في بداية نهاية الجدول باستخدام طريقة insertRow () بتمرير الفهارس. يوضح هذا الدليل إجراءات إضافة صف جديد في جدول بالنقر فوق زر باستخدام JavaScript.