65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<script>
|
|
// Permet de sélectionner une ligne en cliquant dessus
|
|
/*
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('table tr').forEach(row => {
|
|
row.addEventListener('click', () => {
|
|
document.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
|
|
row.classList.add('selected');
|
|
});
|
|
});
|
|
});
|
|
*/
|
|
|
|
// Permet de sélectionner une ligne en cliquant dessus
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
|
|
|
|
const comparer = (idx, asc) => (a, b) => {
|
|
const v1 = getCellValue(asc ? a : b, idx);
|
|
const v2 = getCellValue(asc ? b : a, idx);
|
|
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');
|
|
}
|
|
// Appliquer la classe 'numeric' pour l'alignement à droite
|
|
cell.classList.add('numeric');
|
|
}
|
|
});
|
|
};
|
|
|
|
// permet de trier le tableau
|
|
document.querySelectorAll('table th').forEach(th => {
|
|
th.addEventListener('click', () => {
|
|
const table = th.closest('table');
|
|
const tbody = table.querySelector('tbody') || table;
|
|
const rows = Array.from(tbody.querySelectorAll('tr:nth-child(n+2)')); // ignore header
|
|
const index = Array.from(th.parentNode.children).indexOf(th);
|
|
const asc = !th.classList.contains('asc');
|
|
table.querySelectorAll('th').forEach(th => th.classList.remove('asc', 'desc'));
|
|
th.classList.toggle('asc', asc);
|
|
th.classList.toggle('desc', !asc);
|
|
rows.sort(comparer(index, asc)).forEach(row => tbody.appendChild(row));
|
|
});
|
|
});
|
|
|
|
// Appliquer la colorisation après chargement du tableau
|
|
colorizeCells();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |