đź› Technologies Used
• HTML5
• CSS3 (Bootstrap 5)
• Vanilla JavaScript
✨ Final Design Preview
• Responsive modern table layout
• Select all rows with a single click
• Delete selected rows instantly
• Neat, professional Bootstrap styling
đź“‚ Folder Structure
/project-folder
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
✨ index.html (Main File)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Table View | TechQuestWorld</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container py-5">
<h2 class="text-center mb-4 fw-bold">User Management</h2>
<div class="d-flex justify-content-end mb-3">
<button id="deleteSelected" class="btn btn-danger btn-sm">
<i class="bi bi-trash-fill"></i> Delete Selected
</button>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle shadow-sm">
<thead class="table-primary">
<tr>
<th scope="col">
<input type="checkbox" id="selectAll" class="form-check-input">
</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody id="userTable">
<tr>
<td><input type="checkbox" class="rowCheckbox form-check-input"></td>
<td>John Doe</td>
<td>john@example.com</td>
<td><span class="badge bg-success">Admin</span></td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheckbox form-check-input"></td>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td><span class="badge bg-warning text-dark">Editor</span></td>
</tr>
<tr>
<td><input type="checkbox" class="rowCheckbox form-check-input"></td>
<td>Mike Johnson</td>
<td>mike@example.com</td>
<td><span class="badge bg-info text-dark">Subscriber</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
🎨 css/style.css (External Custom CSS)
table th, table td {
vertical-align: middle;
}
.form-check-input {
width: 1.3em;
height: 1.3em;
}
#deleteSelected {
transition: 0.3s ease;
}
#deleteSelected:hover {
background-color: #dc3545;
color: #fff;
transform: scale(1.05);
}
body {
background-color: #f8f9fa;
}
🧩 js/script.js (External JavaScript)
const selectAll = document.getElementById("selectAll");
const checkboxes = document.querySelectorAll(".rowCheckbox");
selectAll.addEventListener("change", function () {
checkboxes.forEach((checkbox) => {
checkbox.checked = this.checked;
});
});
const deleteButton = document.getElementById("deleteSelected");
deleteButton.addEventListener("click", function () {
if (confirm("Are you sure you want to delete selected rows?")) {
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
checkbox.closest("tr").remove();
}
});
selectAll.checked = false;
}
});
🔥 Conclusion
Congratulations 🎉
You have now built a modern table view with select all and delete options using pure JavaScript and Bootstrap 5.
You can now easily integrate this into any Admin Dashboard, CRM or Data Management system.
