maj style html

This commit is contained in:
Yacine31
2025-04-16 20:44:14 +02:00
parent b646a0c12c
commit a2d95dd682
2 changed files with 32 additions and 2 deletions

View File

@@ -51,6 +51,15 @@
th.desc::after { th.desc::after {
content: " 🔽"; content: " 🔽";
} }
/* Style pour les couleurs conditionnelles */
.orange {
background-color: #ff9800;
}
.red {
background-color: #f44336;
}
</style> </style>
</head> </head>
<body> <body>

View File

@@ -10,7 +10,7 @@
}); });
}); });
*/ */
// Permet de sélectionner une ligne en cliquant dessus // Permet de sélectionner une ligne en cliquant dessus
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent; const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
@@ -20,7 +20,25 @@
const v2 = getCellValue(asc ? b : a, idx); const v2 = getCellValue(asc ? b : a, idx);
return !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2); return !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
}; };
// Sélection de la colonne (par exemple la 3ème colonne, index 2)
const colorColumnIndex = 9;
const colorizeCells = () => {
const rows = document.querySelectorAll('table tr:nth-child(n+2)'); // Ignore l'en-tête
rows.forEach(row => {
const cell = row.children[colorColumnIndex];
const value = parseFloat(cell.innerText);
if (!isNaN(value)) {
if (value > 90) {
cell.classList.add('red');
} else if (value >= 80 && value <= 90) {
cell.classList.add('orange');
}
}
});
};
// permet de trier le tableau // permet de trier le tableau
document.querySelectorAll('table th').forEach(th => { document.querySelectorAll('table th').forEach(th => {
th.addEventListener('click', () => { th.addEventListener('click', () => {
@@ -35,6 +53,9 @@
rows.sort(comparer(index, asc)).forEach(row => tbody.appendChild(row)); rows.sort(comparer(index, asc)).forEach(row => tbody.appendChild(row));
}); });
}); });
// Appliquer la colorisation après chargement du tableau
colorizeCells();
}); });
</script> </script>