استخراج قيم العمود الأول من جدول HTML باستخدام JavaScript
عندما يتعلق الأمر بالحصول على قيم الخلايا من الأعمدة في جدول HTML باستخدام JavaScript، يمكن تحقيق ذلك بطرق عديدة. في حالتك، تريد الحصول على القيم الموجودة في العمود الأول (
) لكل صف داخل الأجزاء (
) المختلفة في الجدول.قد تكون أحد الطرق البسيطة لتحقيق ذلك هي باستخدام تقنيات JavaScript. يمكننا استخدام معرف الجدول (myTable) للوصول إلى الصفوف (
) داخل كل جزء (
)، ثم الوصول إلى العمود الأول (
) في كل صف واستخراج قيمته.فيما يلي قطعة من الكود لتحقيق ذلك:
javascript// الحصول على مرجع للجدول باستخدام معرفه
var myTable = document.getElementById('myTable');
// إعداد مصفوفة لتخزين القيم
var valuesArray = [];
// الحصول على جميع الأجزاء (tbodies) داخل الجدول
var tableBodies = myTable.getElementsByTagName('tbody');
// حلقة تمر عبر جميع الأجزاء
for (var i = 0; i < tableBodies.length; i++) {
// الحصول على جميع الصفوف داخل الجزء
var rows = tableBodies[i].getElementsByTagName('tr');
// حلقة تمر عبر جميع الصفوف داخل الجزء
for (var j = 0; j < rows.length; j++) {
// الحصول على العمود الأول (td) في كل صف
var firstCell = rows[j].getElementsByTagName('td')[0];
// إضافة قيمة العمود الأول إلى المصفوفة
valuesArray.push(firstCell.innerText || firstCell.textContent);
}
}
// الآن يحتوي valuesArray على القيم: ["Val1", "Val2", "Val3", "Val4"]
console.log(valuesArray);
يقوم الكود أعلاه بالتحقق من الصفوف داخل كل جزء (
) ويستخرج قيمة العمود الأول (
) لكل صف، ثم يخزن هذه القيم في مصفوفة (valuesArray). في النهاية، ستكون المصفوفة قد حصلت على القيم المطلوبة “Val1”, “Val2”, “Val3”, “Val4”.
المزيد من المعلومات
بالطبع، دعونا نقوم بتوسيع المعلومات حول هذا السياق. في عالم تطوير الويب، JavaScript يلعب دورًا حيويًا في تحسين تفاعل المستخدم وتحقيق تجارب مستخدم ممتازة. عند التعامل مع الجداول في HTML، يكون الوصول إلى قيم الخلايا أمرًا شائعًا لتنفيذ العديد من المهام.
تقوم الشيفرة البرمجية السابقة بتحقيق هذا من خلال استخدام تقنيات DOM (Model Object Document) في JavaScript. تبدأ العملية بالحصول على مرجع للجدول باستخدام معرف الجدول (myTable). ثم يتم الوصول إلى الأجزاء (
) داخل الجدول، ومن ثم يتم تحديد كل صف (
) داخل كل جزء. في كل صف، يتم الوصول إلى العمود الأول (
) واستخراج قيمته باستخدام innerText أو textContent.
من الجدير بالذكر أن استخدام innerText أو textContent يعتمد على المتصفح، حيث يتم استخدام أحدهما بناءً على توافره. وذلك لأن هناك اختلافات بين المتصفحات في تعاملها مع النصوص في العناصر.
بالإضافة إلى ذلك، يمكن تحسين الكود باستخدام مفاهيم أخرى في JavaScript مثل querySelectorAll لتحديد العناصر بشكل أدق، واستخدام دوال أخرى مثل map لتحسين الأداء وجعل الشيفرة البرمجية أكثر قوة وإتقانًا.
هذا المثال يبرز كيف يمكن للمطورين استخدام JavaScript بشكل فعّال لاستخراج البيانات من صفحات الويب والتفاعل مع عناصر HTML بشكل دينامي.
