در صفحه باید جدولی با برنامه درسی بر اساس داده های JSON وجود داشته باشد. هر ردیف جدول باید شامل اطلاعات درس باشد، به شرح زیر: - نام درس - زمان برگزاری درس - حداکثر تعداد شرکت کنندگان

سؤالك:

در صفحه باید جدولی با برنامه درسی بر اساس داده های JSON وجود داشته باشد. هر ردیف جدول باید شامل اطلاعات درس باشد، به شرح زیر: - نام درس - زمان برگزاری درس - حداکثر تعداد شرکت کنندگان - تعداد فعلی شرکت کنندگان - دکمه "ثبت نام" - دکمه "لغو ثبت نام"

إجابة الشبكة العصبية:

برای ایجاد این جدول، می‌توانید از کدهای HTML و JavaScript استفاده کنید. ابتدا باید اطلاعات دروس را در یک فایل JSON ذخیره کرده و سپس با استفاده از جاوااسکریپت، این اطلاعات را در جدول نمایش دهید. به عنوان مثال، کد زیر یک جدول ساده با اطلاعات دروس را نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
    <title>برنامه درسی</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>نام درس</th>
            <th>زمان برگزاری</th>
            <th>حداکثر تعداد شرکت کنندگان</th>
            <th>تعداد فعلی شرکت کنندگان</th>
            <th>ثبت نام</th>
            <th>لغو ثبت نام</th>
        </tr>
        <tbody id="table-body"></tbody>
    </table>

    <script>
        const courses = [
            {
                name: "درس 1",
                time: "شنبه 10:00",
                maxParticipants: 20,
                currentParticipants: 15
            },
            {
                name: "درس 2",
                time: "یکشنبه 14:00",
                maxParticipants: 30,
                currentParticipants: 25
            }
        ];

        const tableBody = document.getElementById("table-body");

        courses.forEach(course => {
            const row = document.createElement("tr");

            row.innerHTML = `
                <td>${course.name}</td>
                <td>${course.time}</td>
                <td>${course.maxParticipants}</td>
                <td>${course.currentParticipants}</td>
                <td><button>ثبت نام</button></td>
                <td><button>لغو ثبت نام</button></td>
            `;

            tableBody.appendChild(row);
        });
    </script>
</body>
</html>

در این کد، اطلاعات دروس در آرایه courses قرار داده شده و سپس با استفاده از جاوااسکریپت، این اطلاعات در جدول نمایش داده شده است. هر درس شامل نام، زمان برگزاری، حداکثر تعداد شرکت کنندگان و تعداد فعلی شرکت کنندگان است. همچنین برای هر درس دکمه‌های "ثبت نام" و "لغو ثبت نام" نیز اضافه شده است. این کد را می‌توانید با اطلاعات و دکمه‌های دلخواه خود تغییر دهید و به نیازهای خود برای نمایش برنامه درسی بر اساس داده‌های JSON پیاده‌سازی کنید.

<!DOCTYPE html>
<html>
<head>
    <title>برنامه درسی</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>نام درس</th>
            <th>زمان برگزاری</th>
            <th>حداکثر تعداد شرکت کنندگان</th>
            <th>تعداد فعلی شرکت کنندگان</th>
            <th>ثبت نام</th>
            <th>لغو ثبت نام</th>
        </tr>
        <tbody id="table-body"></tbody>
    </table>

    <script>
        const courses = [
            {
                name: "درس 1",
                time: "شنبه 10:00",
                maxParticipants: 20,
                currentParticipants: 15
            },
            {
                name: "درس 2",
                time: "یکشنبه 14:00",
                maxParticipants: 30,
                currentParticipants: 25
            }
        ];

        const tableBody = document.getElementById("table-body");

        courses.forEach(course => {
            const row = document.createElement("tr");

            row.innerHTML = `
                <td>${course.name}</td>
                <td>${course.time}</td>
                <td>${course.maxParticipants}</td>
                <td>${course.currentParticipants}</td>
                <td><button>ثبت نام</button></td>
                <td><button>لغو ثبت نام</button></td>
            `;

            tableBody.appendChild(row);
        });
    </script>
</body>
</html>

MOJAB 24

الأسئلة الأخيرة: