تعلم كيفية إدارة جدول المستخدمين مع إمكانيات الإضافة والحذف باستخدام 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();
}
}