Scribd
Upload
1 views

ADV SE

The document contains HTML code for a Student Data Management system that allows users to perform CRUD operations through a single form. It includes a styled interface for adding, editing, and deleting student records, with a table displaying all students' information. The JavaScript functionality manages the student data and updates the table dynamically based on user interactions.

Uploaded by

thenomeenterprieses
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

ADV SE

The document contains HTML code for a Student Data Management system that allows users to perform CRUD operations through a single form. It includes a styled interface for adding, editing, and deleting student records, with a table displaying all students' information. The JavaScript functionality manages the student data and updates the table dynamically based on user interactions.

Uploaded by

thenomeenterprieses
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Name : Adeel Fazil​

SAP ID: 70110717​


—-----------------------------------------------------------------------------------------------------------------​
HTML Code :​
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Data Management - CRUD (Single Form)</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #eef2f7; /* Light background */
margin: 0;
padding: 0;
}
header {
background-color: #34495e; /* Dark header */
color: #fff;
padding: 15px;
text-align: center;
}
h1 {
margin: 0;
font-size: 2.2em;
}
.form-container {
max-width: 1000px;
margin: auto;
padding: 20px;
}
form {
background-color: #ecf0f1; /* Light gray background for form */
padding: 20px;
margin: 20px 0;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
input, textarea, button {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #27ae60; /* Green for Add/Update */
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2ecc71; /* Slightly darker green on hover */
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #34495e; /* Dark header for the table */
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9; /* Light gray rows */
}
tr:hover {
background-color: #f1f1f1; /* Hover effect */
}
.actions button {
background-color: #e74c3c; /* Red for Delete */
color: white;
border: none;
padding: 6px 12px;
cursor: pointer;
border-radius: 5px;
}
.actions button:hover {
background-color: #c0392b; /* Darker red on hover */
}
.feedback-container {
margin-top: 20px;
background-color: #f7f7f7;
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<header>
<h1>Student Data Management - CRUD (Single Form)</h1>
</header>

<div class="form-container">
<h3>Student Management</h3>
<form id="crudForm">
<input type="text" id="name" placeholder="Name" required>
<input type="number" id="age" placeholder="Age" required>
<input type="email" id="email" placeholder="Email" required>
<input type="text" id="course" placeholder="Course" required>
<textarea id="feedback" placeholder="Feedback"></textarea>

<input type="hidden" id="editIndex"> <!-- To track the index of the student being edited
-->

<button type="submit" id="submitButton">Add Student</button>


</form>

<h3>All Students</h3>
<table id="studentTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Course</th>
<th>Feedback</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Student data will be inserted here dynamically -->
</tbody>
</table>
</div>

<script>
let students = [];

// Function to render the table with students


function renderTable() {
const tableBody =
document.getElementById('studentTable').getElementsByTagName('tbody')[0];
tableBody.innerHTML = ''; // Clear the table

students.forEach((student, index) => {


const row = tableBody.insertRow();
row.innerHTML = `
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.email}</td>
<td>${student.course}</td>
<td>${student.feedback}</td>
<td class="actions">
<button onclick="editStudent(${index})">Edit</button>
<button onclick="deleteStudent(${index})">Delete</button>
</td>
`;
});
}

// Add or Update student (Create or Update)


document.getElementById('crudForm').addEventListener('submit', function(event) {
event.preventDefault();

const name = document.getElementById('name').value;


const age = document.getElementById('age').value;
const email = document.getElementById('email').value;
const course = document.getElementById('course').value;
const feedback = document.getElementById('feedback').value;
const editIndex = document.getElementById('editIndex').value;

const student = { name, age, email, course, feedback };

if (editIndex === '') {


// Add new student (Create)
students.push(student);
} else {
// Update existing student (Update)
students[editIndex] = student;
}

renderTable();
document.getElementById('crudForm').reset(); // Reset form
document.getElementById('editIndex').value = ''; // Clear editIndex
document.getElementById('submitButton').textContent = 'Add Student'; // Reset button
text
});

// Edit student (Update)


function editStudent(index) {
const student = students[index];

document.getElementById('name').value = student.name;
document.getElementById('age').value = student.age;
document.getElementById('email').value = student.email;
document.getElementById('course').value = student.course;
document.getElementById('feedback').value = student.feedback;

document.getElementById('editIndex').value = index;
document.getElementById('submitButton').textContent = 'Update Student'; // Change
button text
}

// Delete student (Delete)


function deleteStudent(index) {
if (confirm('Are you sure you want to delete this student?')) {
students.splice(index, 1); // Remove student from array
renderTable(); // Refresh the table
}
}

// Initial render of the table


renderTable();
</script>
</body>
</html>
​

You might also like