Html
برنامه CRUD
نام:
توضیحات:
ایجاد کنید
Css
بدن {
font-family: Arial, sans-serif;
}
border-collapse: collapse;
width: 100%;
}
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
background-color: #f0f0f0;
}
Jss
// فرم و عناصر جدول را دریافت کنید
const form = document.getElementById('create-form');
const table = document.getElementById('item-table');
const itemList = document.getElementById('item-list');
// یک آرایه خالی برای ذخیره آیتم ها راه اندازی کنید
اجازه دهید آیتم ها = [];
// تابع ایجاد یک آیتم جدید
تابع createItem (نام، توضیحات) {
const item = { name, description };
items.push(item);
renderItems();
}
// تابع رندر آیتم ها در جدول
تابع renderItems() {
itemList.innerHTML = '';
items.forEach((item) => {
const row = document.createElement('tr');
row.innerHTML =
;
itemList.appendChild(row);
})؛
}
// تابع ویرایش یک مورد
تابع editItem(index) {
اقلام const = آیتم[index];
// TO DO: اجرای قابلیت ویرایش
}
// تابع حذف یک مورد
تابع deleteItem(index) {
items.splice(index, 1);
renderItems();
}
// شنوندگان رویداد را به فرم و جدول اضافه کنید
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const description = document.getElementById('description').value;
createItem (نام، توضیحات)؛
})؛
table.addEventListener('click', (e) => {
if (e.target.classList.contains('edit-btn')) {
const index = e.target.parentNode.parentNode.rowIndex - 1;
editItem(index);
} else if (e.target.classList.contains('delete-btn')) {
const index = e.target.parentNode.parentNode.rowIndex - 1;
حذف آیتم (شاخص)؛
}
})؛
// برنامه را راه اندازی کنید
renderItems();
