"Undo" "Redo" Button with icon: in Page top left
"Undo" "Redo" Button with icon: in Page top left
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Editable Table with Undo/Redo</title>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="toolbar" style="display: flex; gap: 10px; left: 10px; position: fixed; top: 70px;">
<button disabled id="undo-btn" onclick="undoChange()" style="background: lightskyblue; border-radius: 7px; color: white; font-size: 20px; padding: 5px; border: 1px solid; border-radius: 7px;">↺ Undo</button>
<button disabled id="redo-btn" onclick="redoChange()" style="background: lightskyblue; border-radius: 7px; color: white; font-size: 20px; padding: 5px; border: 1px solid; border-radius: 7px;">↻ Redo</button>
</div>
<div class="table-container" style="margin-top: 50px; padding: 10px;">
<table id="editableTable" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Date</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Origin</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Item Type</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Item Category</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Items</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Rate Rs.</th>
<th style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 8px; text-align: left;">Stock</th>
</tr>
</thead>
<tbody>
<tr style="background: white">
<td contenteditable="true" rowspan="50" style="border: 1px solid #ddd; padding: 8px;">22/11/24</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">India</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Non-Veg</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Starter</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Chicken Pockora</td>
<td type="number" contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">120</td>
<td type="number" contenteditable="true" style="border:">10</td>
</tr>
<tr style="background: #f9f9f9">
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">India</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Non-Veg</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Starter</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Chicken Pockora</td>
<td type="number" contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">120</td>
<td type="number" contenteditable="true" style="border:">10</td>
</tr>
<tr style="background: white">
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">India</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Non-Veg</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Starter</td>
<td contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">Chicken Pockora</td>
<td type="number" contenteditable="true" style="border: 1px solid #ddd; padding: 8px;">120</td>
<td type="number" contenteditable="true" style="border:">10</td>
</tr>
</tbody>
</table>
</div>
<script>
let undoStack = [];
let redoStack = [];
function saveState(cell) {
// Save the cell's previous and current state in undo stack
undoStack.push({
cell: cell,
content: cell.dataset.previousValue
});
redoStack = []; // Clear redo stack on a new change
updateButtons();
}
// Attach event listeners to editable cells
document.querySelectorAll('#editableTable td[contenteditable="true"]').forEach(cell => {
cell.addEventListener('focus', () => {
cell.dataset.previousValue = cell.innerText; // Save current value before edit
});
cell.addEventListener('blur', () => {
if (cell.innerText !== cell.dataset.previousValue) {
saveState(cell); // Only save state if content changed
}
});
});
// Undo function
function undoChange() {
if (undoStack.length === 0) return;
const lastChange = undoStack.pop();
redoStack.push({
cell: lastChange.cell,
content: lastChange.cell.innerText
});
// Revert cell content to previous state
lastChange.cell.innerText = lastChange.content;
updateButtons();
}
// Redo function
function redoChange() {
if (redoStack.length === 0) return;
const lastRedo = redoStack.pop();
undoStack.push({
cell: lastRedo.cell,
content: lastRedo.cell.innerText
});
// Apply the redone content to the cell
lastRedo.cell.innerText = lastRedo.content;
updateButtons();
}
// Update button states based on stack contents
function updateButtons() {
document.getElementById('undo-btn').disabled = undoStack.length === 0;
document.getElementById('redo-btn').disabled = redoStack.length === 0;
}
</script>
</body>
</html>
Output:
User Editable Table
| Date | Origin | Item Type | Item Category | Items | Rate Rs. | Stock |
|---|---|---|---|---|---|---|
| 22/11/24 | India | Non-Veg | Starter | Chicken Pockora | 120 | 10 |
| India | Non-Veg | Starter | Chicken Pockora | 120 | 10 | |
| India | Non-Veg | Starter | Chicken Pockora | 120 | 10 |
Comments
Post a Comment