كيفية استخدام الجداول التفاعلية في HTML باستخدام JavaScript

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 19 ديسمبر 2024

محتوى المقال

لماذا نستخدم الجداول التفاعلية؟
إنشاء جدول HTML بسيط
إضافة ميزة البحث في الجدول
إضافة ميزة فرز الأعمدة
الخلاصة

كيفية استخدام الجداول التفاعلية في HTML باستخدام JavaScript

في عالم تطوير الويب الحديث، تُعتبر الجداول التفاعلية من الأدوات المهمة لعرض وتحليل البيانات بشكل فعال. باستخدام HTML وJavaScript، يمكنك إنشاء جداول ديناميكية تحتوي على ميزات مثل الفرز، التصفية، والبحث. هذه الميزات تجعل تجربة المستخدم أكثر سهولة وفعالية، حيث يمكن للمستخدم الوصول إلى المعلومات بسرعة. في هذا المقال، سنتعرف على كيفية إنشاء جدول تفاعلي بسيط باستخدام HTML وJavaScript، وإضافة بعض الميزات التفاعلية.

لماذا نستخدم الجداول التفاعلية؟

الجداول التفاعلية تتيح للمستخدمين التعامل مع كميات كبيرة من البيانات بطريقة مبسطة وسهلة. على سبيل المثال، يمكنك إضافة ميزات مثل:

**البحث**: يمكن للمستخدمين البحث عن محتوى معين داخل الجدول.
**الفرز**: يمكنك فرز البيانات تصاعديًا أو تنازليًا بناءً على أعمدة الجدول.
**التصفية**: يمكن للمستخدمين عرض بيانات معينة بناءً على معايير محددة.

إنشاء جدول HTML بسيط

لنبدأ بإنشاء جدول HTML بسيط يحتوي على بعض البيانات. إليك مثال لجدول يضم معلومات حول مجموعة من الطلاب.


            <table id="studentsTable">

              <thead>

                <tr>

                  <th>الاسم</th>

                  <th>العمر</th>

                  <th>المعدل</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <td>أحمد</td>

                  <td>20</td>

                  <td>85</td>

                </tr>

                <tr>

                  <td>سارة</td>

                  <td>22</td>

                  <td>90</td>

                </tr>

              </tbody>

            </table>

هذا الجدول يحتوي على ثلاثة أعمدة (الاسم، العمر، المعدل) وعدة صفوف تمثل الطلاب. الآن، سنضيف ميزات تفاعلية باستخدام JavaScript.

إضافة ميزة البحث في الجدول

أول خطوة في جعل الجدول تفاعليًا هي إضافة ميزة البحث. سنضيف حقل إدخال (input) يسمح للمستخدم بالبحث داخل الجدول.


            <input type="text" id="searchInput" placeholder="ابحث عن اسم..." onkeyup="searchTable()">

الآن نضيف دالة JavaScript التي تقوم بتنفيذ عملية البحث:


            <script>

              function searchTable() {

                var input, filter, table, tr, td, i, txtValue;

                input = document.getElementById("searchInput");

                filter = input.value.toUpperCase();

                table = document.getElementById("studentsTable");

                tr = table.getElementsByTagName("tr");

                for (i = 1; i < tr.length; i++) {

                  td = tr[i].getElementsByTagName("td")[0];

                  if (td) {

                    txtValue = td.textContent || td.innerText;

                    if (txtValue.toUpperCase().indexOf(filter) > -1) {

                      tr[i].style.display = "";

                    } else {

                      tr[i].style.display = "none";

                    }

                  }

                }

              }

            </script>

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

إضافة ميزة فرز الأعمدة

ميزة أخرى مفيدة هي القدرة على فرز الجدول بناءً على أعمدة معينة، مثل الاسم أو العمر. سنقوم بإضافة خاصية تسمح بفرز الجدول عند النقر على رؤوس الأعمدة.


            <script>

              function sortTable(columnIndex) {

                var table, rows, switching, i, x, y, shouldSwitch, direction, switchcount = 0;

                table = document.getElementById("studentsTable");

                switching = true;

                direction = "asc";

                while (switching) {

                  switching = false;

                  rows = table.rows;

                  for (i = 1; i < (rows.length 1); i++) {

                    shouldSwitch = false;

                    x = rows[i].getElementsByTagName("TD")[columnIndex];

                    y = rows[i + 1].getElementsByTagName("TD")[columnIndex];

                    if (direction == "asc") {

                      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

                        shouldSwitch = true;

                        break;

                      }

                    } else if (direction == "desc") {

                      if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {

                        shouldSwitch = true;

                        break;

                      }

                  }

                  }

                  if (shouldSwitch) {

                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

                    switching = true;

                    switchcount++;

                  } else {

                    if (switchcount == 0 && direction == "asc") {

                      direction = "desc";

                      switching = true;

                    }

                  }

                }

            </script>

باستخدام هذه الدالة، يمكنك الآن فرز الجدول عند النقر على رؤوس الأعمدة.

الخلاصة

الجداول التفاعلية تعد أداة قوية لتحسين تجربة المستخدم عند التعامل مع البيانات الكبيرة. باستخدام HTML وJavaScript، يمكنك بسهولة إضافة ميزات مثل البحث والفرز لجدول البيانات الخاص بك، مما يوفر طريقة تفاعلية وسهلة لعرض وتحليل البيانات. هذه الميزات ليست مفيدة فقط للمستخدمين ولكنها أيضًا تساهم في تحسين الكفاءة والتفاعل مع التطبيقات أو المواقع التي تحتوي على جداول بيانات.