Tableau filtrable à deux colonnes
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f7fa;
color: #333;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.header {
margin-bottom: 2rem;
text-align: center;
}
.search-container {
margin-bottom: 1.5rem;
position: relative;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6b7280;
}
.search-input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 1rem;
transition: all 0.2s;
}
.search-input:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
.table-container {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
}
table {
width: 100%;
border-collapse: collapse;
}
thead {
background-color: #4f46e5;
color: white;
}
th {
padding: 1rem;
text-align: left;
font-weight: 600;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 0.05em;
}
td {
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:nth-child(even) {
background-color: #f9fafb;
}
tbody tr:hover {
background-color: #eff6ff;
}
.no-results {
padding: 2rem;
text-align: center;
color: #6b7280;
font-style: italic;
}
@media (max-width: 640px) {
th, td {
padding: 0.75rem 0.5rem;
}
}
Aucun résultat trouvé pour votre recherche
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const table = document.getElementById('dataTable');
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
const noResults = document.getElementById('noResults');
searchInput.addEventListener('keyup', function() {
const searchTerm = searchInput.value.toLowerCase();
let visibleCount = 0;
for (let i = 0; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName('td');
let rowMatch = false;
for (let j = 0; j -1) {
rowMatch = true;
break;
}
}
if (rowMatch) {
rows[i].style.display = '';
visibleCount++;
} else {
rows[i].style.display = 'none';
}
}
if (visibleCount === 0) {
noResults.style.display = 'block';
table.tBodies[0].style.display = 'none';
} else {
noResults.style.display = 'none';
table.tBodies[0].style.display = '';
}
});
});
