Try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records (CRUD) Table</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background-color: #f8f9fa; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); background-color: white; }
th, td { border: 1px solid #dee2e6; padding: 12px; text-align: left; }
th { background-color: #e9ecef; color: #495057; font-weight: 600; }
.controls { margin-bottom: 20px; padding: 15px; border: 1px solid #ced4da; border-radius: 5px; background-color: #fff; }
input[type="text"], input[type="number"] { padding: 8px; margin-right: 10px; border: 1px solid #adb5bd; border-radius: 4px; }
button { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; transition: background-color 0.3s; }
.add-btn { background-color: #28a745; color: white; }
.view-btn { background-color: #007bff; color: white; }
.edit-btn { background-color: #ffc107; color: #343a40; }
.save-btn { background-color: #17a2b8; color: white; display: none; } /* Initially hidden */
.delete-btn { background-color: #dc3545; color: white; }
</style>
</head>
<body>
<h1>Student Records 🧑🎓</h1>
<div class="controls">
<h2>Add New Record</h2>
<input type="text" id="classInput" placeholder="Class (e.g., 10A)">
<input type="number" id="rollInput" placeholder="Roll No (e.g., 15)">
<input type="text" id="nameInput" placeholder="Name (e.g., Jane Doe)">
<button class="add-btn" onclick="addRecord()">Add Record</button>
</div>
<table id="recordsTable">
<thead>
<tr>
<th>Class</th>
<th>Roll No</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// Array to store the records (in-browser storage)
let records = [
{ class: '10A', roll: 15, name: 'Jane Doe' },
{ class: '9B', roll: 22, name: 'Mike Smith' }
];
// This keeps track of the index being edited
let editingIndex = -1;
// --- CRUD Functions ---
/**
* Adds a new record from the input fields.
*/
function addRecord() {
const classVal = document.getElementById('classInput').value.trim();
const rollVal = document.getElementById('rollInput').value.trim();
const nameVal = document.getElementById('nameInput').value.trim();
if (!classVal || !rollVal || !nameVal) {
alert('Please fill in all fields.');
return;
}
records.push({
class: classVal,
roll: parseInt(rollVal, 10),
name: nameVal
});
// Clear input fields
document.getElementById('classInput').value = '';
document.getElementById('rollInput').value = '';
document.getElementById('nameInput').value = '';
renderTable();
}
/**
* Converts table row cells to input fields for editing.
* @param {number} index - The index of the record to edit.
*/
function editRecord(index) {
if (editingIndex !== -1) {
alert('Please save or cancel the current edit before starting another one.');
return;
}
editingIndex = index;
const row = document.getElementById(`row-${index}`);
const record = records[index];
// Get the data cells (Class, Roll, Name)
const classCell = row.cells[0];
const rollCell = row.cells[1];
const nameCell = row.cells[2];
const actionsCell = row.cells[3];
// Replace cell content with input fields
classCell.innerHTML = `<input type='text' id='edit-class-${index}' value='${record.class}'>`;
rollCell.innerHTML = `<input type='number' id='edit-roll-${index}' value='${record.roll}'>`;
nameCell.innerHTML = `<input type='text' id='edit-name-${index}' value='${record.name}'>`;
// Update the buttons in the Actions cell
actionsCell.innerHTML = `
<button class='save-btn' style='display:inline;' onclick='saveRecord(${index})'>Save</button>
<button class='delete-btn' onclick='cancelEdit(${index})'>Cancel</button>
`;
}
/**
* Saves the changes from the input fields back to the array.
* @param {number} index - The index of the record to save.
*/
function saveRecord(index) {
const newClass = document.getElementById(`edit-class-${index}`).value.trim();
const newRoll = document.getElementById(`edit-roll-${index}`).value.trim();
const newName = document.getElementById(`edit-name-${index}`).value.trim();
if (!newClass || !newRoll || !newName) {
alert('All fields must be filled to save the record.');
return;
}
records[index] = {
class: newClass,
roll: parseInt(newRoll, 10),
name: newName
};
editingIndex = -1; // Reset editing state
renderTable();
}
/**
* Cancels the current edit and restores original data in the row.
*/
function cancelEdit() {
editing