Html
<!DOCTYPE html>
CRUD Application
CRUD Application
Name:
Description:
Create
| Name | Description | Actions |
|---|
<script src="script.js"></script>
Css
body {
font-family: Arial, sans-serif;
}
item-table {
border-collapse: collapse;
width: 100%;
}
item-table th, #item-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
item-table th {
background-color: #f0f0f0;
}
Jss
// Get the form and table elements
const form = document.getElementById('create-form');
const table = document.getElementById('item-table');
const itemList = document.getElementById('item-list');
// Initialize an empty array to store items
let items = [];
// Function to create a new item
function createItem(name, description) {
const item = { name, description };
items.push(item);
renderItems();
}
// Function to render items in the table
function renderItems() {
itemList.innerHTML = '';
items.forEach((item) => {
const row = document.createElement('tr');
row.innerHTML =
<td>${item.name}</td>
<td>${item.description}</td>
<td>
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</td>
itemList.appendChild(row);
});
}
// Function to edit an item
function editItem(index) {
const item = items[index];
// TO DO: implement edit functionality
}
// Function to delete an item
function deleteItem(index) {
items.splice(index, 1);
renderItems();
}
// Add event listeners to the form and table
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('name').value;
const description = document.getElementById('description').value;
createItem(name, description);
});
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;
deleteItem(index);
}
});
// Initialize the application
renderItems();
Top comments (0)