إنشاء جداول ديناميكية باستخدام JavaScript

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

في الشيفرة الحالية، عندما يتم إدخال رقم الجزء في حقل النص ويتم النقر على الزر “Check now”، يتم استدعاء الدالة check. إذا كانت قيمة الحقل تساوي “1”، يتم عرض “table here” باستخدام document.write، والشيء نفسه يحدث إذا كانت القيمة هي “2”.

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

اليك شيفرة توضيحية:

htmlCopy code
<form name="part">
    
    <script language="javascript">
        function check(form) {
            if (form.userid.value == "1") {
                generateTable(form);
            } else if (form.userid.value == "2") {
                generateTable2(form);
            } else {
                alert("الجزء غير موجود\nأو لا يتوافق");
            }
        }

        function generateTable(form) {
            // احضار عنصر الصفحة الذي ستظهر فيه الجدول
            var tableContainer = document.getElementById("table-container");

            // إنشاء الجدول
            var table = document.createElement("table");

            // إنشاء الصفوف والأعمدة
            for (var i = 0; i < 6; i++) {
                var row = table.insertRow();
                for (var j = 0; j < 4; j++) {
                    var cell = row.insertCell();
                    // يمكنك تعبئة الخلية بالمحتوى هنا
                    cell.innerHTML = "محتوى الخلية";
                }
            }

            // إضافة الجدول إلى العنصر المحدد في الصفحة
            tableContainer.appendChild(table);
        }

        // يمكنك تكرار نفس العملية لجدول آخر إذا كنت بحاجة إليه
        function generateTable2(form) {
            // ... الكود الخاص بجدول 2
        }
    script>
form>
<div id="table-container">div>

هذا الكود يقوم بإنشاء جدول بناءً على الأعداد التي قمت بتحديدها (4 أعمدة و 6 صفوف) ويضعه في العنصر الذي يحمل id “table-container”. يمكنك تعديل المحتوى داخل الخلايا والقيام بالتعديلات اللازمة حسب احتياجاتك.

بالطبع، سأوسع في شرح المزيد من المعلومات حول كيفية إنشاء جدول في JavaScript وتخصيص المزيد من الخصائص.

في الشيفرة السابقة، قمت بإنشاء دالتين generateTable و generateTable2 لإنشاء الجداول بناءً على الحاجة. يمكنك تخصيص هذه الدوال لتحقيق المزيد من الإبداع في تصميم الجداول.

تخصيص المحتوى في الخلايا:

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

javascriptCopy code
cell.innerHTML = "بيانات " + i + "-" + j;

تخصيص أسلوب الجدول:

يمكنك تخصيص الجدول أيضًا من حيث الأسلوب باستخدام CSS. يمكنك إضافة فئات للجدول وتطبيق أسلوب محدد لتحسين المظهر.

javascriptCopy code
// في داخل دالة generateTable
table.className = "custom-table";

ثم يمكنك تخصيص الأسلوب باستخدام CSS:

cssCopy code
.custom-table {
    border-collapse: collapse;
    width: 100%;
}

.custom-table td, .custom-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.custom-table th {
    background-color: #f2f2f2;
}

التفاعل مع بيانات المستخدم:

يمكنك جعل الجدول أكثر تفاعلية بالتفاعل مع بيانات المستخدم، مثل استبدال النص بمعلومات حقيقية أو إضافة إمكانيات تحرير.

تكرار عملية إنشاء الجدول:

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

استخدام مكتبات الواجهة الرسومية:

إذا كنت ترغب في تحسين التفاعل والمظهر، يمكنك النظر في استخدام مكتبات واجهة المستخدم (UI) مثل Bootstrap أو أي مكتبة أخرى لتحسين تصميم الجداول وتوفير مظهر أفضل.

باختصار، يمكن تخصيص الجداول في JavaScript بطرق متعددة لتلبية احتياجات تصميمك وتحسين تفاعل المستخدم مع صفحتك.