الهدف التعليمي

تعلم كيفية إدارة جدول المستخدمين مع إمكانيات الإضافة والحذف باستخدام JavaScript.

جدول المستخدمين

الاسم العمر البريد الإلكتروني إجراءات
الشرح البرمجي
// مصفوفة تخزين المستخدمين
const users = [];
const userTable = document.getElementById("userTable");

// إضافة مستخدم جديد
document.getElementById("userForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const name = document.getElementById("name").value;
    const age = document.getElementById("age").value;
    const email = document.getElementById("email").value;

    users.push({ name, age, email });
    displayUsers();
    this.reset();
});

// عرض المستخدمين
function displayUsers() {
    userTable.innerHTML = "";
    users.forEach((user, index) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td>${user.name}</td>
            <td>${user.age}</td>
            <td>${user.email}</td>
            <td><span class="delete-btn" onclick="deleteUser(${index})">حذف</span></td>
        `;
        userTable.appendChild(row);
    });
}

// حذف مستخدم
function deleteUser(index) {
    if (confirm("هل أنت متأكد من رغبتك في حذف هذا المستخدم؟")) {
        users.splice(index, 1);
        displayUsers();
    }
}